Contrast Checker

Check text contrast before publishing

Good color contrast is one of the simplest ways to make a website easier to read. This contrast checker compares a text color and background color using the WCAG relative luminance formula, then reports the contrast ratio and pass/fail results for AA and AAA targets. It is useful for buttons, navigation, badges, cards, alert messages and any place where text appears on a colored surface.

The calculation runs in your browser and does not require uploading anything. Pick two colors, swap them if needed, and use the preview block to see how a real text sample feels. The ratio is objective, but the preview still matters because font weight, letter size and surrounding layout influence readability. A pair that technically passes can still feel tiring if the type is tiny or the surface is visually busy.

Understanding AA and AAA results

WCAG AA is the common target for most websites and products. Normal text should reach at least 4.5:1, while large text should reach at least 3:1. AAA is stricter: 7:1 for normal text and 4.5:1 for large text. Large text means 18pt regular or 14pt bold and above. The lower threshold exists because bigger, heavier letters remain easier to distinguish at lower contrast than small body text. If you are unsure which category applies, treat the text as normal and aim for the higher requirement.

Designing accessible color systems

Contrast should be checked early, not only after a visual design is finished. When you choose brand colors, test them against the surfaces where they will actually appear: white cards, dark navigation bars, muted backgrounds and disabled states. Keep accessible combinations documented as tokens so teams do not need to rediscover them. Remember that contrast is only one part of accessibility. Use visible focus outlines, clear labels, semantic HTML and more than color alone to communicate important states such as errors, success and warnings.