Color Contrast Checker
Check WCAG 2.2 contrast ratios and APCA, and get a fix when a pair fails.
#68BF69 on #702310
4.77:1 · APCA Lc -47.9 · Light text on a darker background
Small body text: the quick brown fox jumps over the lazy dog.
Body text: the quick brown fox jumps over the lazy dog.
Large text: the quick brown fox jumps over the lazy dog.
Headline: the quick brown fox jumps over the lazy dog.
A button border, at 3:1 minimum
WCAG 2.2 ratio
4.77:1
Clears the 4.5:1 that body text needs
APCA
Lc -47.9
Lc 27 short of the 75 that body text needs · limited
Polarity
Light text on a darker background
Perceptual distance ΔE₀₀ 67.9
Conformance
4 of 5 checks pass · marked rows apply to body text| Level | Applies to | Needs | Result |
|---|---|---|---|
| AA | Normal text your text Body copy under 24px, or under 18.66px when bold. |
4.5:1 | Pass |
| AA | Large text 24px and above, or 18.66px and above when bold. |
3:1 | Pass |
| AA | UI components Borders, icons, focus rings and chart keys. |
3:1 | Pass |
| AAA | Normal text your text The enhanced level. Often required in the public sector. |
7:1 | Fail |
| AAA | Large text Enhanced level for headings and display text. |
4.5:1 | Pass |
This pair clears AA for body text. For AAA you would need 7.0:1, and it is currently 4.77:1. APCA is less convinced: Lc -48 against the 75 it asks of body text.
How the pair holds up with color vision deficiency
Four types simulated
Protanopia
No working red cones. Around 1 in 100 men.
5.94:1
Deuteranopia
No working green cones. Around 1 in 100 men.
4.17:1
Tritanopia
No working blue cones. Around 1 in 10,000 people.
4.73:1
Achromatopsia
No color vision at all. Very rare, but the strictest test.
4.77:1
Contrast is mostly a lightness relationship, so these ratios usually track the original closely. Where they drop sharply, the pair was relying on hue difference alone.
The two colors
Channel values and luminance
| Role | HEX | RGB | HSL | Relative luminance |
|---|---|---|---|---|
| Text | #68BF69 | rgb(104, 191, 105) | hsl(120.7, 40.5%, 57.8%) | 0.4122 |
| Background | #702310 | rgb(112, 35, 16) | hsl(11.9, 75%, 25.1%) | 0.0468 |
Enter a text color and a background color. You get the WCAG 2.2 contrast ratio, a pass or fail at every conformance level, and the APCA lightness contrast that the next version of the guidelines is built on. When a pair fails, the checker works out the nearest color that passes rather than leaving you guessing.
What the WCAG contrast ratio measures
The contrast ratio compares the relative luminance of two colors, from 1:1 for identical colors up to 21:1 for black on white. Luminance weights the red, green and blue channels by how bright each one looks, which is why a pure blue on black scores so much lower than a pure yellow on black. The WCAG contrast ratio formula is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color.
WCAG contrast requirements at a glance
Level AA asks for 4.5:1 for normal body text and 3:1 for large text, meaning 24px regular or 18.66px bold and above. Buttons, icons, input borders and focus rings need 3:1 against whatever sits next to them. Level AAA raises body text to 7:1 and large text to 4.5:1. Most accessibility laws and procurement rules point to WCAG 2.2 AA.
Fixing a pair that fails without losing your brand
When a color pair fails, the usual reaction is to switch to black or white. You rarely need to. Contrast depends almost entirely on lightness, so this checker keeps the hue and chroma of your color and moves only its lightness until the pair passes. The suggestion still looks like your brand color, just a step darker or lighter.
How to use the contrast checker
- Enter both colorsText and background, in any CSS format. Swap them with one click to test the reverse polarity.
- Read the verdictAA needs 4.5:1 for body text and 3:1 for large text. AAA raises that to 7:1 and 4.5:1. Interface components and focus indicators need 3:1.
- Compare with APCAThe Lc score weighs text size and weight, which the WCAG 2 ratio does not. Lc 75 is the practical floor for body copy.
- Fix a failureIf the pair fails, the suggestions keep your hue and chroma and move only lightness, so the fix still looks like your brand.
Common questions
What contrast ratio do I need to pass WCAG?
For WCAG 2.2 Level AA: 4.5:1 for normal text, 3:1 for large text (18.66px bold or 24px regular and above), and 3:1 for user interface components and graphical objects. Level AAA raises normal text to 7:1 and large text to 4.5:1.
What is a good contrast ratio for a website?
Aim for at least 4.5:1 on all body text and 7:1 where you can manage it, especially for long reading. Many comfortable pairings of dark text on a light background land between 10:1 and 15:1. Very high contrast, such as pure black on pure white, passes easily but can feel harsh on large screens.
Does WCAG contrast apply to logos?
No. Logotypes and brand names have no contrast requirement under WCAG 2.2, and text that is purely decorative or part of an inactive control is also exempt. Everything a user has to read to use the page is in scope.
What is APCA and should I use it instead?
APCA (Accessible Perceptual Contrast Algorithm) is the candidate replacement being developed for WCAG 3. It models how contrast actually behaves at different text sizes and weights, and it handles dark mode far better than the WCAG 2 ratio. It is not yet a legal standard, so treat it as a second opinion: conform to WCAG 2.2 for compliance, and use APCA to catch pairs that pass the ratio but still read badly.
Why does light text on a dark background behave differently?
The WCAG 2 ratio is symmetric, so swapping the colors gives an identical number, but human vision is not. Light text on dark tends to bloom and look thinner. APCA handles this with separate polarity coefficients, which is why its score changes sign and magnitude when you swap the pair.
Does opacity affect contrast?
Yes, and it is a common source of failures. A color at 60% opacity is blended with whatever sits behind it, so the effective contrast is against that blend, not the nominal color. Flatten the color first, then test it.
The rest of the toolkit
Every tool reads the same color formats, so you can carry a value straight from one to the next.