Skip to content
PixelKit

Colour

Is that text readable? Measure it.

Enter a text colour and a background, and get the WCAG 2.x contrast ratio with AA and AAA verdicts for normal and large text.

Processed on your device

Live preview

Large text: 24 px regular or 18.66 px bold.

Normal body text at 16 px. Most paragraphs use a size like this, so they carry the stricter requirement: 4.5:1 at AA and 7:1 at AAA.

Outline buttonSmall 12 px caption text

HEX, rgb() or hsl()

HEX, rgb() or hsl()

Contrast ratio

4.47:1

AA, normal text

needs 4.5:1

Fail

AA, large text

needs 3:1

Pass

AAA, normal text

needs 7:1

Fail

AAA, large text

needs 4.5:1

Fail

UI components and icons (1.4.11)

needs 3:1

Pass

How to use

  1. Type or pick a text colour. HEX (#777 or #777777), rgb() and hsl() are all accepted.
  2. Type or pick a background colour.
  3. Read the ratio and the five pass/fail verdicts; the preview shows both text sizes in your colours.
  4. Use Swap to test the reverse combination, such as light text on a dark button.

How it works

Each sRGB channel is converted to linear light, then weighted by how sensitive the eye is to it:

  • c = value / 255; if c ≤ 0.04045 then c / 12.92, otherwise ((c + 0.055) / 1.055)^2.4
  • L = 0.2126 R + 0.7152 G + 0.0722 B
  • ratio = (L_lighter + 0.05) / (L_darker + 0.05), from 1:1 to 21:1

Thresholds come from WCAG 2.2 success criteria 1.4.3 (AA: 4.5:1 for normal text, 3:1 for large), 1.4.6 (AAA: 7:1 and 4.5:1) and 1.4.11 (3:1 for interface components and meaningful graphics). “Large” means at least 24 px regular or 18.66 px (14 pt) bold. The ratio is compared unrounded and displayed truncated, so a combination that fails is never shown as 4.50:1.

Worked example

Grey #777777 on white: 119 / 255 = 0.467, linearised to 0.184, so L = 0.184. White has L = 1. The ratio is (1 + 0.05) / (0.184 + 0.05) ≈ 4.48:1 — just short of 4.5, so it fails AA for normal text but passes for large text. Darken it one step to #767676 and the ratio becomes 4.54:1, a pass. Black on white is the maximum, 21:1.

Limitations

  • Colours are treated as opaque. For semi-transparent text, check the blended colour instead.
  • Contrast over images or gradients varies by position; test the worst spot.
  • WCAG 2.x contrast does not account for font weight beyond the large-text rule, and it is known to over-rate some dark colour pairs. The newer APCA model is under discussion for future guidelines but is not part of WCAG 2.2.

FAQ

Why does 4.48:1 fail if it rounds to 4.5?

WCAG thresholds are minimums and do not allow rounding. A ratio of 4.499:1 is below 4.5:1, so it fails AA for normal text.

Does AA or AAA apply to my site?

Most accessibility laws and policies reference WCAG level AA. AAA is stricter and recommended where possible, especially for long reading, but it is not usually required site-wide.

Do logos need to meet contrast requirements?

No. WCAG exempts text that is part of a logo or brand name. Icons and controls that convey meaning do need 3:1 against their surroundings.

What about placeholder and disabled text?

Placeholder text that conveys information should meet 4.5:1. Text in disabled controls is exempt, though very faint disabled text can still confuse people.