Contrast Checker

Color contrast determines whether text is readable against its background. Low contrast — light gray on white, yellow on white, blue on black with insufficient difference — excludes users with low vision, color deficiency, and anyone reading screens in bright sunlight. The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios measured mathematically from relative luminance of foreground and background colors.

Enter a foreground (text) color and a background color using Hex, RGB, or the color picker. The tool calculates the contrast ratio on a scale from 1:1 (identical colors, unreadable) to 21:1 (black on white, maximum). WCAG Level AA requires 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt bold). Level AAA demands 7:1 for normal text and 4.5:1 for large text — a stricter bar for government and healthcare sites.

Relative luminance accounts for human eye sensitivity — green contributes more to perceived brightness than blue at equal RGB values. The formula converts sRGB channels through gamma correction before computing contrast, so two pairs that look equally different to the eye may yield different ratios.

Preview sample text at various sizes against your chosen background. Swap foreground and background with one click to test reversed color schemes. Pair with the color blindness simulator to verify contrast holds up under deuteranopia and protanopia vision models.

Whether you are auditing an existing site for ADA compliance, choosing button text colors during design, or validating a rebrand palette before launch, contrast checking prevents accessibility failures that manual eyeballing misses.