Two colours
Type a hex code or use the swatch. Results update as you change either one.
What the ratio measures
Contrast ratio compares the relative luminance — the perceived brightness — of two colours. It runs from 1:1, where the colours are identical and text is invisible, to 21:1, which is pure black on pure white.
The calculation follows the formula defined in the Web Content Accessibility Guidelines, weighting red, green and blue separately to match how the eye responds to each. That matters in practice: pure yellow and pure blue are both fully saturated, but yellow reads as far brighter, so the ratio between them is nothing like what their hex codes might suggest.
The thresholds
Level AA
Requires 4.5:1 for normal text and 3:1 for large text. This is the level most organisations aim for and the one commonly referenced in accessibility legislation and procurement requirements.
Level AAA
Requires 7:1 for normal text and 4.5:1 for large text. A stricter standard, aimed at content that must stay readable for people with substantially reduced vision. Rarely mandated across a whole site, but worth meeting for body text in long-form reading.
What counts as large text
Roughly 24 px and above, or 18.66 px and above if bold. Larger letterforms have thicker strokes and more visible shape, which is why they are allowed a lower ratio.
Buttons, borders and icons
WCAG 2.1 added a 3:1 requirement for the visual boundaries of things people need to see and operate: input field borders, button outlines, focus rings, chart lines and icons that carry meaning. This is the requirement most often missed, precisely because it applies to elements that are not text.
Fixing a failing pair
When a combination fails, the fastest fix is usually to move one colour toward black or white rather than changing its hue. The Lighter and Darker buttons do exactly that, stepping the colour so you can watch the ratio climb and stop as soon as it passes.
Which colour to move depends on what is fixed. If the background is a brand colour, adjust the text. If the text must stay a particular shade, adjust the background. In practice, darkening text on a light background disturbs a design less than lightening a background that carries the brand.
One trap worth naming: pale grey placeholder text inside form fields. It looks clean in a mockup, routinely lands around 2.5:1, and is genuinely hard to read for many people — impossible for some.
Why this matters past compliance
Accessibility rules are the formal reason to check contrast, and in many countries they carry legal weight. The practical reason is wider: everyone reads low-contrast text badly on a phone in daylight, on a projector in a lit room, on an ageing monitor, or when tired. Meeting the thresholds is not a concession to a minority — it is what makes an interface work in ordinary conditions.
Frequently asked questions
What ratio should I aim for?
4.5:1 for normal body text meets Level AA, which is the usual target. If you can reach 7:1 without hurting the design, long-form reading benefits noticeably.
Does this check a whole website?
No, it checks one pair at a time. To audit a page, test each distinct text-and-background combination it uses, including link colours, button labels and placeholder text.
Why does the ratio barely move when I change hue?
Because contrast depends on luminance, not hue. Two very different colours of similar brightness give a poor ratio, which is why colourful designs often fail while looking vivid.
Do the buttons change my brand colour permanently?
No. They only adjust the value in this tool so you can find a passing shade. Nothing is saved.
Are the colours I enter sent anywhere?
No. The whole calculation runs in your browser.