🎨

Color Contrast Checker

Check WCAG 2.1 color contrast ratios and accessibility compliance for text and backgrounds.

Foreground (Text) Color

R:30 G:41 B:59

Background Color

R:255 G:255 B:255

Large Text Preview (24px bold)

Large Text Preview (18.66px bold)

Normal text preview - The quick brown fox jumps over the lazy dog. This sample demonstrates how your chosen foreground color appears against the selected background at standard body text size.

Small text preview - 0123456789 abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ !@#$%^&*()

Contrast Ratio

14.63:1

Excellent

WCAG 2.1 Compliance

AA Normal Text (4.5:1)Pass

AAA Normal Text (7:1)Pass

AA Large Text (3:1)Pass

AAA Large Text (4.5:1)Pass

Large text is defined as 18pt (24px) or 14pt (18.66px) bold. Normal text is anything smaller.

Relative Luminance

Foreground0.0218

Background1.0000

About Color Contrast Checker

Free online color contrast checker that calculates the contrast ratio between any two colors and evaluates compliance with WCAG 2.1 accessibility standards. Enter foreground and background colors using hex codes, RGB values, or the built-in color picker, and instantly see whether your color combination passes AA and AAA requirements for both normal and large text. Features a live preview with sample text, relative luminance calculations, and automatic color suggestions when your combination fails accessibility checks. Essential for web designers, developers, and anyone building accessible digital products. 100% browser-based — no signup required.

Frequently Asked Questions

What is a color contrast ratio?▾

A contrast ratio measures the difference in perceived brightness between two colors. It ranges from 1:1 (no contrast, same color) to 21:1 (maximum contrast, black on white). The ratio is calculated using the relative luminance of each color according to the WCAG 2.1 formula.

What contrast ratio do I need for WCAG compliance?▾

WCAG 2.1 Level AA requires a contrast ratio of at least 4.5:1 for normal text (under 18pt or 14pt bold) and 3:1 for large text (18pt+ or 14pt+ bold). Level AAA requires 7:1 for normal text and 4.5:1 for large text. Most websites aim for at least AA compliance.

What is the difference between WCAG AA and AAA?▾

AA is the minimum recommended accessibility standard and is required by most accessibility laws and regulations. AAA is the highest level of accessibility — it requires higher contrast ratios and is ideal for text-heavy content, government sites, and applications used by people with visual impairments.

How do I fix a failing contrast ratio?▾

If your color combination fails, you can darken the text color, lighten the background (or vice versa), or use the suggested colors provided by this tool. Small adjustments to lightness often fix the issue while keeping your design palette intact.

Does this check both text and UI components?▾

WCAG 2.1 requires a minimum 3:1 contrast ratio for UI components and graphical objects (buttons, icons, form borders). This tool checks against all WCAG thresholds so you can evaluate both text and non-text elements.

Is this tool free?▾

Yes, completely free with no signup required. All calculations happen in your browser — no data is sent to any server.

Related Tools

🌈

CSS Gradient Generator

Create beautiful CSS gradients with a visual editor. Copy the CSS code.

🎯

Color Palette Generator

Generate beautiful color palettes from a base color. Export as CSS or JSON.

🔲

Box Shadow Generator

Design CSS box shadows visually with a live preview. Copy the code.

🎨

Color Name Finder

Enter any hex color code and instantly get its exact or closest color name. Covers all 16.7 million hex colors using a database of 1,500+ named colors and smart matching.

📐