Color Contrast Checker
Check WCAG contrast, preview text sizes, and suggest an accessible foreground color.
Colors are calculated locally. Nothing is uploaded.
Color contrast checker
Check whether text is readable on a background using the WCAG contrast ratio. Pick colors with the swatches or type a hex value.
Preview
Sample body text at 16px
Large bold text at 24px
WCAG treats 18pt, or 14pt bold, as large text. The preview shows 16px and 24px bold so you can compare both thresholds.
How the WCAG contrast ratio is calculated
Each color channel is converted to a linear value, the channels are weighted for human sensitivity, and the resulting luminances of the two colors are compared as (lighter + 0.05) divided by (darker + 0.05). The ratio therefore ranges from 1:1 for identical colors to 21:1 for black on white.
What the four thresholds mean
AA is the ordinary level and AAA is the enhanced level. Normal text needs 4.5:1 for AA and 7:1 for AAA. Large text, meaning 18pt or 14pt bold and above, needs 3:1 for AA and 4.5:1 for AAA. These figures come from the contrast minimum success criteria; they are not a judgement about your brand.
How the suggestion is found
The suggestion keeps the hue and saturation of your text color and moves only the lightness. A binary search finds the smallest change that reaches 4.5:1, first towards black and then towards white; the closer of the two results is offered. If neither direction can reach 4.5:1 with that hue, change the background instead.
Frequently asked questions
Why does a color that looks fine fail the check?
Perceived brightness and contrast are not the same thing. A saturated blue can look vivid yet have a luminance close to a light background. The formula measures luminance difference, which is what the guidelines require and what makes text readable for people with low vision.
Will the suggestion keep my brand color?
It keeps the hue and saturation and only changes lightness, so the result stays recognisably the same color family. Small lightness changes rarely pass; expect a noticeable darkening or lightening. Use the suggestion as the text color, not as the background color.
Does this work for text on images or gradients?
No. The checker compares two solid colors. For a gradient or a photo, test the lightest and darkest part of the area behind the text, or place a solid overlay behind the text so the background is predictable.