Color Contrast Checker

Calculates and determines the contrast ratio between text and background colors according to WCAG 2.1 standards, with pass/fail judgment for AA/AAA criteria, real-time preview, and automatic color correction suggestions that meet the criteria.

Color settings

HEX
HEX

contrast ratio

12.63:1
contrast ratio
AA Normal text
4.5:1 or above
eligibility
AA Large Text
3:1 or above
eligibility
AAA Normal text
7:1 or above
eligibility
AAA Large Text
4.5:1 or above
eligibility

preview

Large text (24px bold)
Normal text (16px) - This is sample text. You can see how this text appears. Accessible design creates readable websites for all users.
Small text (12px) - Preview of small text for notes and annotations.

Color Correction Suggestions

If contrast ratio doesn't meet standards, the nearest compliant color is suggested. Click a color to apply.

Current color combination meets all WCAG standards.

Usage and Application Examples

  • Ensure website text and background colors meet WCAG accessibility standards
  • Verify if design system color tokens are accessible
  • Quickly find the best color with automatic correction suggestions when contrast ratios are lacking
  • Real-time preview of how text looks in large, normal, and small text

What is Color Contrast Checker?

Color contrast checkers evaluate whether text and background color combinations meet accessibility standards defined by WCAG 2.1 (Web Content Accessibility Guidelines). The tool calculates contrast ratios and indicates if your combination achieves AA (standard) or AAA (enhanced) compliance levels. This ensures your content remains readable for people with color vision deficiency, low vision, or when viewing on poor-quality displays. Proper contrast is both an accessibility requirement and a design best practice.

How to Use

Enter or select your text color and background color using hex codes, RGB values, or color pickers. The tool instantly calculates the contrast ratio on a scale from 1:1 (no contrast) to 21:1 (maximum contrast). It displays whether your combination passes WCAG AA (4.5:1 for normal text, 3:1 for large text) and AAA (7:1 for normal, 4.5:1 for large) standards. If your combination fails, adjust either color incrementally and watch the ratio update in real-time. Most checkers also preview text against the background so you can visually verify readability.

Use Cases

Website accessibility compliance: Test all text-on-background combinations before launch to meet legal accessibility requirements. PDF document design: Ensure printed or digital PDFs remain readable for all viewers. Presentation design: Verify slide text contrasts work in both well-lit and dark presentation rooms. Mobile app development: Test contrast in various lighting conditions. Brand guideline creation: Establish approved text and background combinations that maintain accessibility across applications.

Tips & Insights

Large text (18pt+ or 14pt+ bold) has lower contrast requirements than body text. Colored text on colored backgrounds requires testing—don't assume dark text automatically passes. Grayscale conversion helps: Convert your design to grayscale to check contrast independent of color theory. Test with actual users when possible—contrast ratios are mathematical minimums, not guarantees of real-world readability.

Frequently Asked Questions

What is the WCAG contrast ratio?

The WCAG contrast ratio is a numerical measure of the difference in brightness between text and background colors as defined by the Web Content Accessibility Guidelines (WCAG), ranging from 1:1 (no difference) to 21:1 (black and white); the higher the value, the easier to read.

What is the difference between the WCAG AA and AAA standards?

The AA standard is the minimum accessibility level, requiring a minimum of 4.5:1 for normal text and 3:1 for large text (18pt or larger or 14pt bold or larger); the AAA standard is a higher level, requiring a minimum of 7:1 for normal text and 4.5:1 for large text.

What is the definition of large text (large text)?

WCAG defines "large text" as normal text larger than 18 points (approximately 24 px) or bold text larger than 14 points (approximately 18.66 px). Large text is passed with a lower contrast ratio than normal text.

How is the contrast ratio calculated?

The contrast ratio is calculated using the relative luminance of two colors. The formula is (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the light color and L2 is the relative luminance of the dark color. Relative luminance is calculated by gamma-correcting each channel of the sRGB color space.

What is the automatic color correction suggestion?

If the contrast ratio does not meet the criteria, this function automatically suggests a color that meets the criteria by adjusting the brightness while maintaining the hue of the original color. By brightening or darkening the foreground or background color, it finds the closest color that achieves the target contrast ratio.

Will the data I enter be sent to the server?

No. All processing is completed on the browser. All processing is completed in your browser and no data is sent to the server. You can use our site with peace of mind.

Why should I care about contrast if my design looks fine to me?

Poor contrast affects people with low vision, color blindness, and older users. It also impacts readability on mobile devices in bright sunlight. Legal compliance (WCAG) is increasingly required for public-facing websites, and good contrast improves user experience for everyone.

How do I know if a color combination needs improvement?

Enter the foreground (text) and background colors into the checker—if the ratio is below 4.5:1 for normal text (AA standard), you need higher contrast. A ratio of 7:1 (AAA) ensures maximum accessibility and is recommended for critical content.

What's the easiest way to fix low-contrast text?

Increase the lightness of light colors or decrease it for dark colors—making them further apart usually solves it. You can also try the "auto-correct" feature if available, which suggests accessible alternatives that stay close to your original color intent.

How do color blindness types affect contrast requirements?

Red-green color blind users cannot distinguish red from green, so they rely entirely on brightness/lightness contrast. Using only color difference is insufficient—always pair colors with adequate luminance contrast to ensure accessibility for all vision types.

Is WCAG AA always enough, or should I aim for AAA?

AAA is ideal for accessibility but not always required. Use AAA for small text, body copy, and mission-critical content. AA is acceptable for large headings and logos. If your audience includes elderly or low-vision users, AAA is strongly recommended.

Can I test contrast with images or gradients?

Most checkers work with solid color inputs, not images. For images, eyedrop the background or text color at the point of maximum contrast and test those solid colors. For gradients, test the lightest and darkest points separately.