Color Contrast Checker (WCAG)
Check two colours against the WCAG contrast thresholds, with the large text rule applied correctly and the nearest passing colour offered.
Enable JavaScript to check your own colours; the result below is for the defaults.
Hex, with or without the hash, or an rgb() value.
The colour actually behind the text, not the page background, if they differ.
From 24px, or 18.66px when bold, WCAG applies its large text thresholds instead.
- AA text
- AAA text
- Icons and borders
Nearest passing text colour:
The quick brown fox jumps over the lazy dog.
Smaller supporting text, same two colours.
Check a text colour against its background and see which WCAG thresholds it clears, with the large text rule applied properly and the nearest passing colour offered when it fails.
How to use
- Enter the colour of the text and the colour actually behind it. If the text sits on a card, that is the card’s colour, not the page’s.
- Set the size the text is really used at. At 24px, or 18.66px when bold, WCAG switches to its large text thresholds, and a colour that fails at body size can pass there.
- Read the three verdicts: AA text is the legal baseline in most places, AAA is the stricter target, and icons and borders have their own 3:1 rule whatever the size.
- When AA fails, the nearest passing colour is offered. It keeps your hue and moves the lightness, so it still looks like your brand.
- Check the preview. A ratio that passes can still be hard to read at small sizes with a thin weight.
Example
A blue that works for headings and not for body text:
#1E56EC on #FFFFFF is 5.84:1
16px regular: AA pass, AAA fail
24px regular: AA pass, AAA pass (large text thresholds)
Icons/borders: passThe ratio does not change with size; the threshold does. 5.84:1 has to beat 4.5 for AA body text and only 3 for large text, which is why making text bigger can turn a near miss into comfortable headroom.
Pitfalls
- Large text is 24px, or 18.66px (14pt) when bold. It is about the rendered size, not the tag: an
h3styled at 16px is body text as far as WCAG is concerned. - The thresholds apply to the colour behind the text, which on a gradient or an image is not one colour. Test the worst point.
- Contrast is only part of legibility. A thin weight at 4.5:1 can read worse than a regular weight at 4.0.
- Placeholder text, disabled controls and low-emphasis captions are still text. The exemption in WCAG covers incidental and decorative text, not “unimportant” text.
- Icons, form borders and focus rings need 3:1 against what is next to them, which is a rule people meet by accident and break on purpose.
- Semi-transparent colours are composited before the ratio is computed. Work out the resulting colour first; this tool reads the alpha channel but ignores it.
- WCAG 2 contrast is a known-imperfect model, especially for dark backgrounds. APCA in WCAG 3 is the successor, but AA compliance today is still measured with this formula.
- Passing at AA does not mean the design is accessible. It is one measurable part of one guideline.
Compatibility
The maths is the WCAG 2.1 relative luminance and contrast ratio formula, unchanged since WCAG 2.0 in 2008, and is what every audit tool and legal standard currently measures against. Hex, shorthand hex and rgb() inputs are accepted. Everything runs in your browser; nothing you type is uploaded.