Color Contrast Checker

The Color Contrast Checker measures the contrast ratio between a foreground (text) color and a background color and tells you whether that pair meets the Web Content Accessibility Guidelines. It reports a single number between 1:1 and 21:1 and grades it against the WCAG 2.2 thresholds for AA and AAA at both normal and large text sizes, plus the separate 3:1 threshold for user-interface components and graphics.

Contrast is the difference in relative luminance between two colors, not just how different they look. Two colors can feel distinct while still failing for readers with low vision, color vision deficiency, or anyone using a phone in bright sunlight. The ratio is calculated with the exact sRGB relative-luminance formula defined by WCAG, so the result matches what auditing tools and screen-reader users experience rather than a rough visual guess.

Everything runs in your browser. Type or paste colors as HEX, RGB, HSL, or a CSS keyword, watch a live text preview update, and if a pair fails you can apply a suggested color that passes. Nothing is uploaded, there is no signup, and the tool keeps working offline once the page has loaded.

The WCAG 2 contrast formula is a ratio of relative luminance, and its thresholds are what accessibility audits and most legal requirements are measured against, so it is the right number to design to. It is also known to be imperfect: it can be generous to light text on dark backgrounds and harsh on some mid-tone pairs, which is why the successor algorithm, APCA, exists and is being trialled for future versions. Large text has a lower bar, and large means 18pt, or 14pt when bold, which is around 24px and 18.66px. Non-text elements are covered separately by 1.4.11 at 3:1, and that is the rule most often missed: icon buttons, input borders and focus rings all need it, and a design can pass on every paragraph and still fail on its form fields.