Contrast is the accessibility rule most often failed by accident, because a colour pair that looks fine on a bright laptop can be unreadable on a phone in daylight. WCAG replaces that judgement with a number. The Color Contrast Checker computes it to 2 decimal places and tells you which of the 4 conformance thresholds the pair clears.
The ratio compares relative luminance, not brightness as your eye reports it. Two colours of identical luminance score 1:1 however different their hues, which is exactly why a red-on-green pair can be invisible to a colourblind reader and still look like contrast to everyone else. The scale runs from 1:1 to 21:1, black on white being the upper bound.
A live preview block shows real sentences at four sizes against your colours, since a ratio that passes on paper can still read badly at 12 pixels. Six quick presets and a Swap Colors button sit alongside, and all of it computes in the page.
Walkthrough: Checking White on Violet
- The tool opens on
#FFFFFF text over #7C3AED, which scores 5.70:1. - Read the four result cards against that figure. Normal Text — AA passes at 4.5, Large Text — AA passes at 3, and Large Text — AAA passes at 4.5.
- Notice the one failure. Normal Text — AAA needs 7:1, so this pairing is fine for body copy under the standard most organisations adopt and short of the enhanced level.
- Press Swap Colors to put the violet on white. The ratio is unchanged, because the formula is symmetric, but the preview shows how different the same number looks in practice.
- Press Copy to take the value in
5.70:1 form, which is the shape auditors and design tickets expect.
How It Calculates Relative Luminance
- Each channel is scaled to 0 to 1 and then linearised, dividing by 12.92 below a threshold of 0.03928 and raising to the power 2.4 above it. That step undoes the gamma encoding built into every sRGB colour.
- The linear channels are weighted 0.2126 red, 0.7152 green and 0.0722 blue, which reflects how much each contributes to perceived brightness. Green carries over 7 times the weight of blue.
- The ratio is the lighter luminance plus 0.05 divided by the darker plus 0.05. That offset is what keeps pure black from producing a division by zero and caps the scale at 21.
- Order does not matter, since the formula sorts the two values itself. Swapping foreground and background always returns the same figure.
- Large text is defined as 18pt regular or 14pt bold, roughly 24px and 18.67px, and it gets a lower bar because bigger glyphs carry more ink per stroke.
Not a Substitute for a Full Accessibility Audit
- Alpha is not modelled. Semi-transparent text composites against whatever sits behind it, and the effective ratio will be lower than the figure shown here. Flatten the colour first.
- WCAG 2.1 contrast is known to be a rough proxy for real legibility, and the newer APCA model built for WCAG 3 disagrees with it, notably on light text over mid-tone backgrounds. This tool implements the 2.1 rule, which is the one currently enforced.
- Ratio says nothing about hue confusion. A pair can clear 7:1 and still be unusable for a reader with deuteranopia, which needs a simulator rather than a number.
- Non-text elements have their own requirement of 3:1 that is not checked here, covering icons, focus rings and form borders.
- Both fields need valid hex. Anything else and the panel reports
Enter valid hex color codes for both fields. rather than guessing at what you meant.