How to Calculate Color Contrast Ratio

Check color contrast ratios for WCAG 2.1 accessibility compliance. Free online contrast checker with AA/AAA ratings, color suggestions, and real-time preview.

Open Contrast Checker →

Step-by-Step Guide

1

Enter foreground and background colors

Type or paste your foreground (text) color and background color using any supported format — hex (#ffffff), RGB, or HSL. You can also use the color picker to visually select colors. The tool updates the preview in real time so you can see exactly how the combination looks.

2

Read the contrast ratio

The tool calculates the contrast ratio between your two colors using the WCAG 2.1 relative luminance formula. The ratio is displayed as a value between 1:1 (no contrast) and 21:1 (maximum contrast, black on white). Higher ratios mean better readability for all users, including those with visual impairments.

3

Understand AA vs AAA compliance levels

WCAG AA requires a minimum ratio of 4.5:1 for normal text and 3:1 for large text (18px+ bold or 24px+ regular). WCAG AAA is stricter — 7:1 for normal text and 4.5:1 for large text. The tool shows pass/fail badges for each level so you can quickly verify your design meets accessibility standards.

4

Adjust colors to meet requirements

If your combination fails, tweak the lightness or saturation of either color until the ratio passes your target level. Small adjustments often suffice — darkening text by 10-15% or lightening the background can push a failing 3.8:1 ratio above the 4.5:1 AA threshold. Use the live preview to ensure the adjusted colors still match your design intent.

Try It Now — Free

No signup, no download. Runs entirely in your browser.

Open Contrast Checker

Frequently Asked Questions

What do WCAG AA and AAA mean?
WCAG AA and AAA are accessibility conformance levels defined by the Web Content Accessibility Guidelines. AA is the standard most laws and regulations require — it ensures text is readable for users with moderate visual impairments. AAA is the highest level, providing enhanced readability for users with more severe vision loss.
What is the minimum contrast ratio for accessible text?
For WCAG AA compliance, normal-sized text needs at least a 4.5:1 contrast ratio, and large text (18px bold or 24px regular and above) needs at least 3:1. For WCAG AAA, the requirements increase to 7:1 for normal text and 4.5:1 for large text.
How do I fix low contrast on my website?
The easiest fix is to darken your text color or lighten your background color until the ratio meets 4.5:1. Avoid using light gray text on white backgrounds — a common mistake. If your brand colors have low contrast, consider using them only for decorative elements and using high-contrast colors for all readable text.
Related Reference

CSS Flexbox Cheat Sheet

View Cheat Sheet →

More Guides

How to Format JSON Online How to Encode & Decode Base64 How to Generate UUID Online How to Test an API Online