Check color contrast ratio

Enter either three-digit or six-digit hexadecimal colors to receive the contrast ratio and clear pass or fail results for AA normal text, AA large text, AAA normal text, and AAA large text. It is useful for checking design tokens, reviewing interface components, documenting accessibility decisions, and catching unreadable color combinations before they reach users.

Read the contrast result correctly

The returned ratio describes the difference in relative luminance between the lighter and darker colors. A result of 1:1 means the colors have identical luminance, while the maximum possible result is 21:1 for black against white. WCAG uses different thresholds because larger or heavier text remains readable at a lower contrast than ordinary body copy. AA requires at least 4.5:1 for normal text and 3:1 for large text. AAA raises those thresholds to 7:1 and 4.5:1 respectively. The response evaluates every threshold separately, so you do not need to interpret one general pass flag. In WCAG terminology, large text is at least 18 point, or at least 14 point when bold. Do not round a displayed result upward when making a compliance decision. This checker compares the full-precision computed ratio with each threshold, even though it presents the ratio itself to two decimal places for a clean, stable result. That distinction matters for colors that sit extremely close to a boundary.

Choose the actual foreground and background

Test the colors that a person really sees, not merely two entries that happen to be adjacent in a design palette. For body copy, the foreground is the rendered text color and the background is the final solid color immediately behind it. Check links in every relevant state, including default, visited, hover, focus, and disabled appearances when those states still communicate information. Also test text inside buttons, badges, alerts, form controls, charts, and navigation elements. This capability accepts opaque hexadecimal colors in #RGB or #RRGGBB form. If an interface uses transparency, gradients, images, blending modes, shadows, or overlays, first determine the resulting rendered colors at the point being assessed. A single pair cannot represent every pixel of a varied background, so test the lowest-contrast region rather than an average or convenient sample. Contrast is also only one part of accessible presentation: focus visibility, non-text contrast, font choice, spacing, and avoiding color as the sole carrier of meaning still require separate review.

Build contrast checks into a reliable workflow

Use the checker early, when changing a token or component is inexpensive, and repeat the check whenever themes or brand colors change. Designers can compare candidate pairs before handing off a screen. Developers can call the same deterministic calculation from tests or release checks and store the returned flags with component snapshots. A practical token audit evaluates each semantic foreground against every background on which the token is permitted, rather than testing only one showcase combination. Keep the intended text size and weight next to each result because a pair that passes AA for large text may still fail ordinary labels or paragraphs. The API costs $0.002 per request, while the browser runner supports quick interactive checks. Neither path uses a network lookup to interpret the colors, and identical inputs produce identical output. Malformed colors are rejected instead of guessed, which helps expose missing hash marks, invalid hexadecimal digits, unsupported alpha channels, and accidental CSS names before an unreliable result enters an accessibility report. Treat a passing ratio as evidence for that exact pair and usage, not as blanket certification of an entire page.