Enter a text colour and a background colour. The checker calculates the WCAG 2.2 contrast ratio and shows straight away whether it's enough for normal text (4.5:1), large text (3:1) and icons or controls (3:1). If a colour fails, we suggest the nearest colour that passes, keeping the hue as close as possible.
Result
Enter a colour we can read to see the result.
Contrast ratio:
| What | Result | Criterion | Minimum |
|---|---|---|---|
| Normal text (your text) | 1.4.3 AA | 4.5:1 | |
| Large text (your text) | 1.4.3 AA | 3:1 | |
| Normal text, enhanced (your text) | 1.4.6 AAA | 7:1 | |
| Large text, enhanced (your text) | 1.4.6 AAA | 4.5:1 | |
| Icons, borders, focus indicators (your text) | 1.4.11 AA | 3:1 |
| What | Result | Contrast ratio | Minimum |
|---|---|---|---|
| Link on the background | |||
| Body text on the background | |||
| Link against the body text (G183) |
At 3:1 against the body text, a link also needs an extra cue on hover and keyboard focus – or simply an underline.
Nearest passing colour
Simulate colour vision deficiency
Simulation (an approximation): the average of each condition at full severity, after Machado et al. (2009). No person sees exactly this, and it is not a test criterion.
As CSS
Which thresholds apply?
| What | WCAG criterion | Level | Minimum contrast |
|---|---|---|---|
| Normal text | 1.4.3 Contrast (Minimum) | AA | 4.5:1 |
| Large text (24 px+, or about 18.7 px+ bold) | 1.4.3 | AA | 3:1 |
| Icons, input borders, focus and state indicators, charts | 1.4.11 Non-text Contrast | AA | 3:1 |
| Normal text, enhanced | 1.4.6 Contrast (Enhanced) | AAA | 7:1 |
| Large text, enhanced | 1.4.6 | AAA | 4.5:1 |
Level AA is the one that counts: EN 301 549 requires it, and that standard is what the BITV 2.0 rests on and what checks under the European Accessibility Act are usually measured against. AAA is a good target for body text, not a requirement.
Large text in WCAG means at least 18 point, or 14 point bold. In a browser that's 24 CSS pixels, or roughly 18.7 CSS pixels at font-weight 700 or more. Enter size and weight and the checker applies the right threshold.
Exempt are logos and brand names, purely decorative text, invisible text, and inactive controls such as a disabled button.
How the contrast ratio is calculated
It starts from each colour's relative luminance. Every channel (R, G, B) is divided by 255 and linearised: values up to 0.04045 are divided by 12.92; larger values become ((value + 0.055) / 1.055)^2.4. Luminance is then L = 0.2126 · R + 0.7152 · G + 0.0722 · B [1].
The contrast ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter colour. It ranges from 1:1 (same colour) to 21:1 (black on white).
Don't round. WCAG says "at least 4.5:1". Grey #777777 on white is 4.478:1 – rounded to one decimal that reads 4.5, but it still fails. One step darker, #767676, reaches 4.54:1 and passes. Our checker shows two decimals and decides on the unrounded value.
Links: contrast with the background and the text around them
A link inside a paragraph has two jobs. It needs enough contrast with the background (4.5:1), and people must be able to tell it apart from the surrounding text without relying on colour (1.4.1 Use of Color).
An underline is the simplest answer. If links are distinguished by colour alone, the W3C describes one sufficient approach: at least 3:1 between link and text colour, plus an extra cue on hover and keyboard focus (technique G183) [4].
Example: blue #0066cc on white reaches 5.56:1 – fine. Next to dark grey body text #333333 it's only 2.26:1. Without an underline, many people won't see it's a link. Switch on "Check a link" to see both values at once.
Non-text contrast: icons, inputs, focus
Since WCAG 2.1, 3:1 also applies to anything you need to perceive to operate or understand a page:
- Input borders, when the border is the only thing showing where to type. A light grey
#ccccccborder on white is 1.60:1 – for many people the field is invisible. - Icons without text – search, basket, close.
- States – a ticked checkbox, the active tab, a toggle on or off.
- Focus indicators – the outline that shows keyboard users where they are (2.4.7 Focus Visible).
- Charts – lines, bars and areas needed to understand the data.
Measure against the adjacent colour – usually the background, or the button itself for an icon inside a button.
Find the nearest passing colour
When a pair fails, the checker adjusts the lightness of your colour in the perceptually uniform OKLCH space [7], keeping hue and chroma as close as possible. Your brand orange stays orange: #ff8800 on white is 2.39:1. #ea7400 works for large text (3.00:1) and #c65300 for normal text (4.52:1). You choose whether to adjust the text or the background.
Tip for design systems: give every brand colour a "text variant" that reaches 4.5:1 on white, and one for dark surfaces. Then nobody has to do the maths case by case.
Simulate colour vision deficiency
The preview shows your colours approximately as people with protanopia, deuteranopia, tritanopia or achromatopsia see them, after the model by Machado and colleagues [8]. It's a simulation, not a test criterion – useful for spotting where information relies on colour alone, like a red and a green status that look the same to many people.
When a two-colour checker isn't enough
A contrast checker compares two colours. On real pages, text sits on gradients, photos and semi-transparent layers, and hover or focus states only appear when you interact. Our free website accessibility checker measures the contrast of every piece of text on the rendered page. On the platform the check runs on a schedule across every page crawled – and where it can't be sure, such as text over an image, the spot goes into a separate list of "potential issues" instead of counting as a pass.