About Contrast Checker
Contrast ratio is a number between 1 and 21 describing how far apart two colours are in perceived brightness. Black on white is 21:1. Identical colours are 1:1. WCAG sets the minimum for normal-size text at 4.5:1 for level AA and 7:1 for AAA, with lower bars for large text and interface elements.
The measurement is not a simple subtraction of the two colours. Screen values are gamma-encoded, meaning the number 128 does not represent half the light of 255 — it represents about 22% of it. Every ratio here linearises the channels first, which is what the WCAG formula specifies and what a surprising number of implementations skip. Skipping it produces answers that look plausible and are wrong exactly in the mid tones where most text sits.
Contrast is the single most commonly failed accessibility requirement on the web, and it is also the cheapest to fix. It affects far more people than the phrase 'colour blindness' suggests: anyone reading on a phone in daylight, on a cheap display, or with the ordinary vision changes that come with age.
How to check contrast
Set your two colours
Enter the text colour and the background colour in any format, or use the pickers. Swap them with one button.
Read the result
The ratio appears immediately, with a pass or fail for each WCAG level and a live preview at real text sizes.
Fix a failure
If the pairing fails, the suggested colour is the closest passing shade of your hue — so it still looks like your brand rather than defaulting to black.
What the levels require
- AA, normal text — 4.5:1. This is the legal baseline in most jurisdictions and the one to design against.
- AA, large text — 3:1. Large means 18pt and above, or 14pt and above when bold. Roughly 24px, or 19px bold.
- AAA, normal text — 7:1. Aim for it in long-form reading; it is demanding for coloured text on white.
- AAA, large text — 4.5:1.
- Non-text elements — 3:1. Applies to icons, form field borders, focus rings and chart elements that carry meaning.
What the ratio does not tell you
Contrast ratio is a brightness measurement, so two colours with very different hues but similar brightness score badly even though many people can distinguish them easily. Red text on a green background of the same lightness is a classic example: it fails, and it should, because to a viewer with red-green colour blindness the two are nearly identical.
The reverse also holds. A pairing can pass comfortably and still be unpleasant — pure saturated blue on pure white passes AA, and reading a paragraph of it is genuinely unpleasant. Passing is a floor, not a design goal.
Finally, the ratio assumes flat colours. Text over a photograph or a gradient has a different contrast at every pixel; test against the lightest and darkest points it crosses, or put a solid scrim behind it.