Color contrast, with a clear answer.
Enter a text color and a background color. See the ratio, preview the pair, and check the relevant contrast thresholds.
By the ComplyWCAG team · Updated 13 October 2026
Check your color pair
This tool evaluates two opaque sRGB colors using relative luminance. Choose the foreground and background that actually appear together. Calculations run locally; color inputs are not sent to our servers or analytics.
Use a 3- or 6-digit hex color, for example #fff or #07304A. Opaque sRGB colors only.
Make every word easier to see.
This is a preview of your chosen colors. A color pair is only one part of an accessible interface.
Contrast ratio
- Pass
AA normal text
Minimum 4.5:1
- Pass
AA large text / UI colors
Minimum 3:1
- Pass
AAA normal text
Minimum 7:1
- Pass
AAA large text
Minimum 4.5:1
The displayed ratio is rounded; pass/fail uses the full value. Large text is at least 18pt (24 CSS px), or 14pt (about 18.67 CSS px) bold. Test UI components against their actual adjacent colors. This check does not evaluate transparency, gradients, images, focus behavior, or full-page conformance.
Read the result in context
Normal text needs 4.5:1 for WCAG AA; large text has a 3:1 threshold. AAA text thresholds are 7:1 for normal text and 4.5:1 for large text. Large text means at least 18pt, or 14pt bold.
Pass/fail is calculated before the displayed ratio is rounded. A color pair close to the minimum deserves extra care with thin fonts and real rendering. Logos and some incidental or inactive content have exceptions; consult the W3C guidance for the exact criterion.
Check the rest of the experience
A passing pair does not certify a page. Test hover, selected, focus, and error states against the colors actually adjacent to them. Check imagery, transparency, gradients, and controls separately. For non-text UI contrast, the pair is only one part of the criterion.
Use the checklist to review keyboard access, forms, page structure, zoom, and real tasks. Fix the source styles where contrast is inadequate, while preserving visitor choice and a usable default.
Your next step