Contrast Checker
WCAG contrast check
WCAG contrast check Runs locally in your browser
The quick brown fox
Small body text at 14px
| Normal text (AA) | needs 4.5:1 | Pass |
| Normal text (AAA) | needs 7:1 | Pass |
| Large text 18pt+ (AA) | needs 3:1 | Pass |
| Large text 18pt+ (AAA) | needs 4.5:1 | Pass |
| UI components and graphics (AA) | needs 3:1 | Pass |
Text: #1a1a1a Background: #ffffff Contrast ratio: 17.40:1 Normal text (AA) (needs 4.5:1): Pass Normal text (AAA) (needs 7:1): Pass Large text 18pt+ (AA) (needs 3:1): Pass Large text 18pt+ (AAA) (needs 4.5:1): Pass UI components and graphics (AA) (needs 3:1): Pass
About the
The Contrast Checker measures the contrast ratio between a text colour and a background colour using the WCAG luminance formula, and tells you which accessibility levels that pair passes. This is the check that decides whether body text is actually readable: a ratio of 4.5 to 1 is the minimum for normal text, 3 to 1 for large text and for interface boundaries, and 7 to 1 for enhanced compliance. Judging contrast by eye is unreliable, because the eye is far more sensitive to green than to blue, which is why a yellow that looks bright and a blue that looks dark can score almost identically.
Where people use the
- Checking whether body text on a coloured background meets AA.
- Choosing between black and white text for a button colour.
- Auditing an existing palette before a redesign.
- Documenting an accessibility decision in a ticket.
How to use the
- 1
Set the text colour
Type a hex value such as 1a1a1a, or use the colour picker. Three-digit shorthand such as f0a is accepted.
- 2
Set the background colour
Same for the background. The preview updates as you change either one.
- 3
Read the ratio
The number runs from 1:1, identical colours, to 21:1, black on white. Higher means more readable.
- 4
Check the level you need
Normal body text needs 4.5 to 1 for AA and 7 to 1 for AAA. Headings at 18pt or 14pt bold, and UI borders, need 3 to 1.
- 5
Look at the preview as well as the number
A pair can pass on paper and still look poor at a small size or on a low-quality screen. If it looks hard to read, it is hard to read.
Tips and best practices
- Darken a colour for text, keep the brighter version for fills.
- Check the smallest size the text will actually be used at.
- Borders and icons need 3 to 1 too, not just text.
Frequently asked questions
What is the contrast ratio formula?
Each colour is converted to relative luminance using the standard weights, 0.2126 for red, 0.7152 for green and 0.0722 for blue, after gamma correction. The ratio is then the lighter luminance plus 0.05 divided by the darker plus 0.05. The result ranges from 1:1 to 21:1.
Why does my brand colour fail?
Because most saturated mid-tone colours cannot reach 4.5 to 1 against white. The usual fix is to darken the colour for text use while keeping the brighter version for large fills, which is exactly what most design systems do with their primary colour.
Is passing the ratio enough to be accessible?
It is necessary but not sufficient. Very large or very small text, thin font weights, text over images, and certain forms of colour vision deficiency all affect readability beyond the ratio. Test with real users where you can.
Does the direction matter, light on dark or dark on light?
No. The ratio is symmetrical, so black on white and white on black both score 21:1. What differs in practice is glare and perceived weight, which is a design judgement rather than a compliance one.
What counts as large text?
In WCAG terms, 18pt or larger, or 14pt or larger when bold. In CSS pixels that is roughly 24px, or about 18.66px when bold.
Where does the calculation happen?
Entirely in your browser. Nothing is uploaded, so you can check colours from a brand guideline that is not public yet.