Color Contrast
Checker

What the contrast ratio number means

The contrast ratio is a numerical representation of the difference in perceived brightness between two colors. It’s expressed as a ratio — for example, 12.63:1 — where a higher number means a greater difference between the colors and easier readability for users.

The scale runs from 1:1 (identical colors, zero contrast) to 21:1 (pure black on pure white, maximum contrast). The algorithm used is based on the relative luminance formula specified in the WCAG 2.1 standard, which approximates how the human eye perceives brightness differences.

WCAG AA vs AAA — when each matters

The Web Content Accessibility Guidelines (WCAG) define two conformance levels for contrast. Level AA is the legal and widely-adopted baseline — it’s what most accessibility audits and laws like the ADA and EN 301 549 require. Level AAA is the enhanced standard, targeting users with more severe visual impairments.

Aim for AA as a non-negotiable baseline for any public-facing product. AAA is worth pursuing for body text on content-heavy sites — news, documentation, government — where sustained reading is expected.

Normal text vs large text — size thresholds

WCAG defines “large text” with specific thresholds because larger characters are easier to read at lower contrast. Large text is defined as 18px and above at regular weight, or 14px and above at bold weight (700+). Everything below those sizes is treated as normal text and held to the stricter 4.5:1 requirement.

In practice: your main headings and display type are large text; your body copy, captions, labels, and navigation links are normal text. If in doubt, apply the normal text standard — it’s safer and covers the widest audience.

UI components — what counts

The 3:1 ratio for UI components applies to the visual elements that communicate state or action — not the text inside them. This includes the border of a text input, the fill color of a checkbox or radio button, the stroke of an icon, and the background of a button where the label color alone would be checked separately.

Focus indicators — those outlines that appear when you tab through a page — also need to meet 3:1 against their adjacent colors, a requirement that was clarified and strengthened in WCAG 2.2.

Why contrast matters for real users

Approximately 300 million people worldwide have some form of color vision deficiency, and roughly 246 million have moderate-to-severe low vision. But contrast isn’t just an accessibility concern — it affects everyone.

Using a phone outdoors in direct sunlight, glancing at a screen in a bright room, or reading on an older display with lower brightness — all of these situations reduce effective contrast for any user. Good contrast ratios ensure your design holds up across every environment and every person who visits your site.