Home›Color Tools› Contrast checkerBrowser
Check color contrast against WCAG
Calculates the WCAG contrast ratio between a text color and its background, and shows whether it passes AA and AAA at normal and large text sizes. The ratio is based on relative luminance, not on how different the hues look.
Large text sampleNormal body text at the size most interfaces actually use.
5.85:1
Contrast ratio. WCAG measures relative luminance, not how different the hues look.
- AA — normal textPass · needs 4.5:1
- AA — large text (18pt+)Pass · needs 3:1
- AAA — normal textFail · needs 7:1
- AAA — large textPass · needs 4.5:1
How to use it
- 1Set the text color and the background color.
- 2Read the ratio and the pass or fail marks for AA and AAA.
- 3Check the live sample underneath to see what the ratio actually looks like.
Frequently asked questions
- What ratio do I need to pass?
- 4.5:1 for normal body text at AA, which is the level most accessibility requirements name. Large text — 18pt, or 14pt bold — only needs 3:1. AAA raises those to 7:1 and 4.5:1.
- Why does a pair that looks fine to me fail?
- The ratio is computed from relative luminance, not from how different the two hues look. Orange on white reads as high contrast to the eye and scores badly, because both are bright. That gap is exactly the point: the test is for readers whose eyes do not resolve hue the way yours do.
- Does the ratio apply to icons and borders too?
- Interface components and meaningful graphics need 3:1 against what is behind them. Decorative shapes, and text that is part of a logo, are exempt.
- How do I fix a failing pair without changing my brand color?
- Move the lightness rather than the hue. Darkening the text, or lightening the background, changes the ratio quickly while leaving the color recognisable — and it is usually the background that has more room to move.