Color Contrast Checker

Q: What counts as large text in WCAG?

Large text is 18pt and above (roughly 24px), or 14pt and above when bold (roughly 18.66px). Large text has lower contrast requirements because bigger glyphs are easier to read.

Q: Does swapping text and background change the ratio?

No. Contrast ratio is symmetric, so black on white gives the same 21:1 as white on black. The swap button is just for previewing both directions and editing whichever colour you want to adjust.

Accessibility

Test any text and background colour pair against the WCAG 2.1 contrast standard in real time. See a live preview, the exact ratio, AA/AAA pass-fail badges and one-click suggestions that fix failing colours instantly.

Caption · 12px

The quick brown fox

Body text at 16px jumps over the lazy dog. Good contrast keeps every paragraph comfortable to read for everyone, in any light.

Small print & captions at 13px need extra contrast to stay legible.

Sample button

Contrast ratio

21.0: 1

Excellent

Text L*1.000

BG L*0.000

Where it sits · 1 → 21

3 4.5 7

AA · Normal —

AA · Large —

AAA · Normal —

AAA · Large —

UI · Graphics —

Ratios use the official WCAG relative-luminance formula

The free WCAG color contrast checker for accessible text

This color contrast checker measures the ratio between any text colour and its background and tells you instantly whether the pair meets the WCAG 2.1 accessibility guidelines. Drop in two hex values, watch the live preview, and read clear AA and AAA pass-fail badges plus the exact contrast ratio. When a combination fails, the tool suggests the nearest accessible colour and lets you apply it with one click. No sign-up, no limits, completely free.

What is colour contrast ratio?

Contrast ratio is a number from 1:1 (no contrast — identical colours) up to 21:1 (pure black on pure white) that describes how distinguishable text is from its background. The Web Content Accessibility Guidelines use this ratio to define minimum legibility, so people with low vision, colour-blindness or who are simply reading on a glary phone screen can still read your content comfortably.

WCAG AA vs AAA contrast requirements

WCAG defines two conformance levels and two text sizes. Large text means 18pt and up (about 24px), or 14pt bold and up (about 18.66px); everything smaller counts as normal text.

AA · Normal text — at least 4.5:1. The baseline most sites should hit.
AA · Large text — at least 3:1. Headings and big labels get a little slack.
AAA · Normal text — at least 7:1. The enhanced standard for maximum readability.
AAA · Large text — at least 4.5:1. Enhanced level for large text.
UI components & graphics — at least 3:1 for icons, form borders and meaningful graphics.
Decorative & disabled — exempt, but use judgement; users still need to find things.

How is contrast ratio calculated?

The ratio is based on relative luminance — the perceived brightness of a colour. Each channel is normalised to 0–1, linearised (c ≤ 0.03928 ? c/12.92 : ((c+0.055)/1.055)^2.4), then combined as L = 0.2126·R + 0.7152·G + 0.0722·B. The contrast ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter colour. This checker uses that exact formula, so its results match WebAIM and other conformant tools.

How to fix failing contrast

Darken or lighten the text — small luminance changes move the ratio fast; the built-in suggestions do this for you.
Adjust the background instead, if the brand text colour must stay fixed.
Increase font size or weight — large/bold text only needs 3:1 for AA.
Avoid pure grey-on-grey and low-saturation pairs that look fine on your monitor but fail in sunlight.
Never rely on colour alone — pair it with text, icons or underlines for colour-blind users.

Features of this contrast checker

Live sample preview — real heading, body, caption and button rendered in your colours.
Exact WCAG ratio — computed with the official relative-luminance formula and animated.
Full pass-fail matrix — AA & AAA for normal and large text, plus UI components.
Smart fixes — one-click accessible colours when a pair fails AA.
Eyedropper — sample any colour on screen where the browser supports it.
Copy as CSS or report — paste ready-to-use code with the ratio and verdict baked in.

Color contrast — frequently asked questions

What contrast ratio do I need to pass WCAG?

For normal body text you need at least 4.5:1 to pass WCAG AA, or 7:1 for the stricter AAA level. Large text (18pt/24px, or 14pt/18.66px bold) only needs 3:1 for AA and 4.5:1 for AAA.

What counts as "large text" in WCAG?

Large text is 18pt and above — roughly 24px — or 14pt and above when bold, roughly 18.66px. Large text has lower contrast requirements because bigger glyphs are easier to read.

How is the contrast ratio calculated?

It compares the relative luminance of the two colours: ratio = (lighter + 0.05) / (darker + 0.05). Luminance is the linearised, weighted sum of the red, green and blue channels. This tool uses the exact WCAG formula, so results match other conformant checkers.

Does swapping text and background change the ratio?

No. Contrast ratio is symmetric, so #000 on #fff gives the same 21:1 as #fff on #000. The swap button is just for previewing both directions and quickly editing whichever colour you want to adjust.

Is passing contrast enough for accessibility?

Contrast is essential but not the whole picture. You should also avoid conveying meaning by colour alone, provide clear focus states, support resizable text, and test with real assistive technology. Contrast is the easiest big win, which is why it has its own checker.