Color Contrast Checker

Check text-to-background contrast ratios against WCAG 2.1 accessibility standards with real-time preview.

Color & Contrast
8.42: 1
Good
Small text≤18pt / bold ≤14pt
✓ AA✓ AAA
Large text>18pt / bold >14pt
✓ AA✓ AAA

Excellent contrast for small text (below 18pt), and great contrast for large text (above 18pt or bold above 14pt).

Tip of the Day
Great design is invisible. When typography, color, and layout work in harmony, users focus on content — not the container. Always test your contrast ratios to ensure readability for everyone.

Frequently asked questions

What is WCAG 2.1?

The Web Content Accessibility Guidelines (WCAG) 2.1 is a set of recommendations for making web content more accessible to people with disabilities. Contrast ratio requirements ensure that text remains readable for users with low vision, color blindness, or other visual impairments. Compliance is measured at two levels: AA (minimum) and AAA (enhanced).

What contrast ratio do I need?

For small text — below 18pt, or bold text below 14pt — you need at least 4.5:1 for AA compliance and 7:1 for AAA. For large text — above 18pt, or bold above 14pt — the minimums are 3:1 (AA) and 4.5:1 (AAA). Non-text elements like icons and borders require at least 3:1 against adjacent colors.

How is the contrast ratio calculated?

The ratio is computed as (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 of the darker color. Relative luminance is derived from sRGB channel values using the WCAG 2.1 formula with linearized RGB and weighted sums (0.2126R + 0.7152G + 0.0722B). The resulting ratio ranges from 1:1 (no contrast) to 21:1 (maximum contrast, black on white).

What counts as "large text"?

Large text is defined as at least 18pt (24px) in regular weight, or at least 14pt (18.7px) in bold. Because larger and bolder text is easier to read at lower contrast, WCAG permits a lower minimum ratio for these sizes compared to body copy.

Why does my design look fine but fail the check?

Human perception of contrast is influenced by font size, weight, surrounding colors, and context. A combination may feel readable to someone with typical vision but still fall short of the quantitative thresholds that guarantee readability for users with visual impairments. Always trust the computed ratio over subjective impression when compliance is the goal.