Color Contrast Checker

WCAG thresholds and large text

Large text means at least 18pt (24px), or 14pt (18.66px) when bold. Smaller text needs a ratio of at least 4.5:1 at level AA. Check captions, timestamps and helper text as well as body copy.

WCAG 2.1 added a 3:1 requirement for meaningful UI components and graphics. It covers elements such as input boundaries, focus indicators, toggle states and informative icons. For example, a #e5e7eb border on white is about 1.2:1 and does not meet that threshold.

Why level AA is commonly required

Several laws and procurement standards reference WCAG level AA, including EN 301 549 for EU public-sector procurement, Section 508 in the United States and the UK Public Sector Bodies Accessibility Regulations. US accessibility settlements also commonly use AA as a remediation target.

AAA provides stronger contrast for body text, but WCAG does not recommend requiring level AAA across an entire site because some content cannot meet every AAA criterion.

Color pairs that need attention

• Placeholder text. A placeholder that conveys information must meet the text threshold, but it should not replace a persistent label.
• Disabled controls. WCAG exempts inactive controls from contrast requirements. They still need enough visual distinction for users to recognize their state.
• Text over images. Contrast changes across an image. Check every area behind the text and add a scrim, overlay or solid panel when the ratio varies too much.
• Brand colors on white. Some brand colors fall between 3:1 and 4.5:1. Use a darker variant for normal text while retaining the original color for exempt logos or qualifying large text.
• Light gray secondary text. #999999 on white is 2.85:1 and fails for normal text. #767676 is 4.54:1 and passes AA.
• Dark mode. Recheck each pair rather than inverting the light palette. Pure white on black reaches 21:1 and can produce halation for some readers; off-white on dark gray may be easier to read while still passing.

How the ratio is calculated

WCAG 2.x defines contrast as (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color’s relative luminance and L2 is the darker color’s. Relative luminance is a weighted sum of the gamma-corrected color channels:

function luminance([r, g, b]) {
  const [R, G, B] = [r, g, b].map(c => {
    const s = c / 255;
    return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
  });
  return 0.2126 * R + 0.7152 * G + 0.0722 * B;   // Green has the greatest weight
}

The green coefficient is larger because human vision is more sensitive to green than blue. As a result, pure blue #0000ff on white has a ratio of about 8.6:1, while pure yellow #ffff00 on white is about 1.07:1.

The ratio ranges from 1:1 (identical colors) to 21:1 (pure black on pure white).

Contrast is necessary but not sufficient

A 4.5:1 text ratio addresses one accessibility requirement. Check these related requirements separately:

1. Color used as the only signal. Do not rely only on red for errors or green for success. Add text, an icon or a pattern as required by WCAG 1.4.1.
2. Missing focus indicators. Keyboard users need a visible focus location. If CSS removes the default outline, provide a replacement that reaches 3:1 against adjacent colors.