๐ Color Contrast Checker
Enter a text color (foreground) and a background color to calculate the WCAG (Web Content Accessibility Guidelines) contrast ratio and check whether it meets the AA and AAA success criteria. Useful for checking the readability and accessibility of a website or app color scheme.
How to use
- Set the foreground (text) color and background color using the color picker or a hex code.
- The contrast ratio and pass/fail results for each WCAG AA/AAA criterion (normal and large text) are shown automatically.
How the calculation works
Contrast is calculated with the formula from WCAG, the Web Content Accessibility Guidelines. First, the relative luminance of the text and background colours is computed. Each 0โ255 channel is scaled to 0โ1, the sRGB gamma curve is removed so the value is proportional to light intensity, and the channels are combined with weights of red 0.2126, green 0.7152 and blue 0.0722 to match the eye's sensitivity. Green is weighted heaviest because the eye is most sensitive to green brightness. Contrast ratio is (lighter luminance + 0.05) รท (darker luminance + 0.05), ranging from 1:1 for identical colours to 21:1 for white on black. WCAG requires, for normal text, at least 4.5:1 for AA and 7:1 for AAA; for large text, 3:1 for AA and 4.5:1 for AAA.
Worked example
On a white background (#FFFFFF) Text #1A3A5C: 11.64:1 โ passes AAA (7:1) even for normal text Text #959595: 3.00:1 โ fails AA for normal text; just passes AA for large text Text #FF0000 (red): 4.00:1 โ fails AA for normal text Bright red is eye-catching, yet it is hard to read as small text on white.
Things to be aware of
- "Large text" means at least 18pt (about 24px) at normal weight, or 14pt (about 18.66px) bold.
- Even with enough contrast, avoid conveying information by colour alone (such as marking errors only in red).
- For text on images or gradients, check against the part of the background with the lowest contrast.
- Three-digit HEX codes (#fff) are treated as their six-digit form (#ffffff).
FAQ
What's the difference between AA and AAA?
AA is the standard accessibility level (4.5:1 or higher for normal text), while AAA is a stricter level (7:1 or higher for normal text). Most sites aim for AA compliance.
What counts as "large text"?
Per the WCAG definition, text is considered "large" at 14pt (about 18.66px) bold or larger, or 18pt (about 24px) regular weight or larger โ and gets a slightly relaxed threshold.
Does this support 3-digit hex codes like #fff?
Yes โ shorthand 3-digit hex codes are automatically expanded to 6 digits before calculating.