Design Tools

WCAG Color Contrast Checker

Measure the contrast ratio between a foreground and background color against WCAG 2.1 AA / AAA thresholds for normal and large text. Everything is computed locally in your browser — zero uploads, zero network requests.

Colors

Live Preview

AaThe quick brown fox jumps over the lazy dog.

Contrast Ratio

19.90: 1

Normal Text

AA PassAAA Pass

AA ≥ 4.5:1 · AAA ≥ 7:1

Large Text

AA PassAAA Pass

AA ≥ 3:1 · AAA ≥ 4.5:1

How it works

The checker converts each hex color to WCAG relative luminance in two steps. First, each sRGB channel (0–255) is linearized: values at or below 0.03928 are divided by 12.92, while larger values use ((c + 0.055) / 1.055)^2.4. The three channels are then weighted 0.2126 for red, 0.7152 for green and 0.0722 for blue to produce luminance L (green dominates because human vision is most sensitive to it). The contrast ratio is (L1 + 0.05) / (L2 + 0.05), with the lighter color as the numerator, yielding a value from 1:1 for identical colors up to 21:1 for white on black. Results are compared against WCAG 2.1 thresholds: normal text passes AA at 4.5:1 and AAA at 7:1, while large text passes at 3:1 (AA) and 4.5:1 (AAA).

Use cases

  • Auditing text, link and button colors for WCAG AA / AAA compliance.
  • Choosing accessible color pairs for design-system tokens before they ship.
  • Checking dark-mode themes, form labels and error / validation states.
  • Evaluating brand colors against white or near-black surfaces.

Troubleshooting

  • No ratio shown: the hex is invalid. Use a 3- or 6-digit hex such as #fff or #FFFFFF.
  • Transparent or gradient backgrounds: the tool tests two solid colors only — composite the effective color first.
  • Text fails at 4.5:1 but is large: large text only needs 3:1 for AA, so check the correct threshold.
  • Non-text elements: WCAG 1.4.11 uses a separate 3:1 rule for UI components rather than the text thresholds.

FAQ

What does a 4.5:1 contrast ratio mean?

WCAG 2.1 requires normal text to reach at least 4.5:1 contrast against its background for AA compliance. Large text (roughly 18pt, or 14pt bold) only needs 3:1. A ratio of 4.5:1 means the lighter color is 4.5 times brighter than the darker one once both are converted to relative luminance.

What counts as large text?

Under WCAG, large text is 18 point (about 24px) or larger, or 14 point (about 18.5px) or larger when bold. Large text has a relaxed AA threshold of 3:1 and an AAA threshold of 4.5:1.

Does this tool account for transparency or gradients?

No. The checker works with two solid hex colors and does not composite alpha over a background. If your design uses semi-transparent overlays or gradients, determine the effective solid color the user will actually see, then test that color.

Why is the maximum possible ratio 21:1?

Relative luminance runs from 0 (pure black) to 1 (pure white), and the formula (L1 + 0.05) / (L2 + 0.05) reaches its ceiling at 1.05 / 0.05 = 21:1 for white on black.

Do these ratios apply to icons and UI controls?

The 4.5:1 and 3:1 thresholds here apply to text. Non-text UI components and graphical objects have a separate WCAG 1.4.11 requirement of at least 3:1 against adjacent colors, which this tool can also help you evaluate.