Why are some colors hard to read?
Our eyes see letters through the difference between light and dark. If two colors are similarly bright, the text sinks into the background even when the colors look very different.
Yellow text on white is very hard to read. Dark blue text on white reads clearly.
Example data
When text and background are different enough, everyone, from little kids to grandparents, can read more easily.
Press “Try it” to put the example into the preview. You can undo it.
Try small and large text
With the same pair of colors, larger or bolder text is easier to read. The contrast ratio does not change with text size; only the required level does.
Large text is 24 px or more, or 18.67 px or more when bold. Large text needs 3:1; normal text needs 4.5:1.
Example data
When text and background are different enough, everyone, from little kids to grandparents, can read more easily.
Press “Try it” to put the example into the preview. You can undo it.
Try buttons and icons
A button has two parts that must be visible: the text on the button, and the border or icon that shows it is a button.
Button text is judged as normal or large text. Borders and icons need 3:1 against the color right next to them. Purely decorative shapes do not.
Example data
See more
Press “Try it” to put the example into the preview. You can undo it.
Understand the result
“Easy to read” means the pair meets AA for normal text (4.5:1 or more). “Large text only” means it only meets AA for large text (3:1 or more). “Hard to read” is below 3:1.
WCAG 2.2 is the W3C’s web accessibility guideline. AA is the level usually required; AAA is a higher level.
The displayed ratio is truncated to 2 decimals; pass/fail uses the unrounded value.
Formula and calculation
Each sRGB channel is normalized to 0–1 and linearized: c/12.92 if c ≤ 0.04045, otherwise ((c + 0.055)/1.055)^2.4. Luminance L = 0.2126 R + 0.7152 G + 0.0722 B. Ratio = (L lighter + 0.05) / (L darker + 0.05).
For the current pair: text luminance 0.0215, background luminance 1.0000 → ratio 14.67:1.
What does this tool check?
It measures the contrast between two opaque colors on screen. It helps you choose colors; it is not a certification.
- It checks color pairs only; it does not certify a whole website or design as WCAG conformant.
- It accepts opaque sRGB colors in 3- or 6-character HEX only; transparency, gradients and background images are not supported yet.
- Results are numeric on-screen contrast; printed color and materials are not guaranteed.
- APCA is not used to conclude AA/AAA, and vision impairments are not simulated.
- Samples are illustrations; they do not represent every device or every reader.
References
The formula and thresholds come from official W3C documents: