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).

Every value this tool reports starts from plain sRGB hex, the #rrggbb notation defined in CSS Color 4. The checker splits the hex into red, green and blue components, linearizes each with the two-part curve above, then applies the fixed coefficients 0.2126, 0.7152 and 0.0722. A naive average of the raw channels would measure brightness incorrectly, because human vision weights green far more than red or blue. The same three coefficients appear in the relative luminance definitions of both WCAG and CSS Color 4, so the ratios agree with other conformance tools that follow the same specification. Relative luminance is not the same as perceived brightness. The eye's response curve is nonlinear, and the linearization step reproduces that curve before the weighted average runs.

The output of that procedure is a single number. The specifications call it relative luminance.

Why the thresholds are what they are

WCAG success criterion 1.4.3, Contrast (Minimum), sets the boundaries this checker applies: 4.5:1 for normal text, 3:1 for large text at AA, plus 7:1 and 4.5:1 at AAA. The numbers let people with moderate low vision, color blindness or contrast sensitivity read comfortably, and they tolerate glare, low-quality displays and unusual ambient light. At these levels, contrast is a measured requirement rather than a design preference, which is why the checker reports a plain pass or fail against each threshold. Meeting the minimum does not make a pair ideal, and exceeding it still helps long-form reading, but the threshold gives teams an objective, testable target.

Text, links and form fields need these ratios. Purely decorative elements do not.

Edge cases

  • Only six-digit hex is accepted, so CSS Color 4 alpha shorthand must be flattened into the background color first.
  • Three-digit shorthand (#f00) equals its six-digit expansion (#ff0000) in sRGB.
  • The formula always places the lighter color in the numerator, so input order never changes the result.
  • A ratio close to 1:1 means the pair is unreadable as text. That is expected for similar colors.

Related checks that work differently

Contrast is one criterion among many. WCAG 1.4.11, Non-text Contrast, demands 3:1 for user interface components and graphical objects such as form borders, focus indicators and icon states, comparing them against adjacent colors rather than a background. Sample the two adjacent colors and reuse this ratio for those checks. Focus indicators, form controls and icon states can pass every color check and still fail for other reasons, such as insufficient size or a missing visible focus ring, and the quick reference lists those techniques alongside the color criteria.

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.

What is the difference between AA and AAA conformance levels?

AA is the practical accessibility target for most public sites: 4.5:1 for normal text, 3:1 for large text. AAA is stricter at 7:1 and 4.5:1 and is often used for long-form reading content. Anything that passes AAA also passes AA, since its thresholds are higher.

Is the ratio affected by my monitor or viewing environment?

No. The ratio is computed purely from the two color values, so the same hex pair reports the same number on any device. Perceived legibility still depends on screen brightness, glare and calibration. Passing a ratio is a necessary condition for readable text, not a guarantee.

The WCAG conformance pages this checker follows

  • The 4.5:1, 3:1 and 7:1 thresholds behind the pass and fail labels above come from success criterion 1.4.3 in the WCAG 2.2 Specification.
  • The WCAG 2.2 Quick Reference is the interactive checklist of the same criteria, including the definition of large text.
  • The sRGB color space, the hex syntax this checker accepts and the relative luminance calculation are defined in CSS Color Module Level 4.
  • WebAIM Contrast and Color explains how contrast works, why the thresholds exist and common mistakes in choosing accessible pairs.