Accessibility tool

Design readable color combinations.

Test foreground and background colors against WCAG contrast criteria. View the results for normal and large text.

Color contrast checker

Contrast ratio 14.81:1
Normal text AAPasses AAAPasses
Large text AAPasses AAAPasses
Live preview Readable text is accessible text. Aa   Aa

The role of color contrast

High contrast helps users with low vision, color blindness, or bright screens read digital content. This tool compares your foreground and background colors locally.

WCAG contrast requirements

WCAG 2.2 requires a 4.5:1 contrast ratio for normal text and 3:1 for large text (AA). AAA requires 7:1 and 4.5:1.

  • Normal text requires 4.5:1 (AA) or 7:1 (AAA).
  • Large text requires 3:1 (AA) or 4.5:1 (AAA). Large text means 18pt regular or 14pt bold.
  • UI components and graphics require 3:1 against adjacent colors.
More about WCAG

Accessible color tips

  1. Add text, icons, or visual cues. Color alone cannot convey information.
  2. Test text in its actual font size and weight. Thin fonts reduce readability despite passing contrast scores.
  3. Test designs across light themes, dark themes, and different screens.

FAQ

What does a 4.5:1 contrast ratio mean?

The ratio compares the luminance of two colors. Higher numbers indicate better separation between foreground and background.

Does passing contrast guarantee accessibility?

No. Accessible design also requires clear typography, visible focus states, adequate spacing, and plain language.

Do you store my colors on a server?

No. The calculation runs locally in your browser. We do not upload or store your color choices.