What is color contrast and why is it important for accessibility?

Color contrast is the difference in luminance between foreground and background colors. Good contrast ensures text is readable for people with low vision, color blindness, or in challenging lighting conditions. It's a key requirement for web accessibility (WCAG).

How do I check color contrast online for free?

Enter your foreground (text) color and background color using the color pickers or HEX/RGB values. The tool instantly calculates the contrast ratio and shows WCAG AA and AAA compliance for normal text, large text, and UI components.

What is WCAG and what are the contrast requirements?

WCAG (Web Content Accessibility Guidelines) are international standards for web accessibility. WCAG 2.1 requires: AA level - 4.5:1 for normal text, 3:1 for large text and UI components. AAA level - 7:1 for normal text, 4.5:1 for large text.

What contrast ratio is required for WCAG AA compliance?

WCAG AA requires 4.5:1 contrast ratio for normal text (under 18pt or 14pt bold) and 3:1 for large text (18pt+ or 14pt+ bold). UI components and graphical objects also need 3:1. AA is the standard requirement for most websites.

What contrast ratio is required for WCAG AAA compliance?

WCAG AAA requires 7:1 contrast ratio for normal text and 4.5:1 for large text. AAA is the highest level of accessibility, recommended for critical content like government sites, healthcare, and educational materials.

What is considered large text in WCAG?

Large text is 18pt (24px) or larger regular weight, or 14pt (18.67px) or larger bold weight. Large text has lower contrast requirements (3:1 for AA, 4.5:1 for AAA) because larger text is inherently easier to read.

What is the maximum contrast ratio possible?

The maximum contrast ratio is 21:1, achieved with pure black (#000000) on pure white (#FFFFFF) or vice versa. The minimum is 1:1 (same color). Higher ratios mean better readability, but extremely high contrast can cause eye strain for some users.

How is contrast ratio calculated?

Contrast ratio uses relative luminance of both colors: (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color's luminance. Luminance is calculated from RGB values using a formula that accounts for human perception of different colors.

Should I always aim for WCAG AAA compliance?

AA is the standard requirement for most websites and is legally required in many jurisdictions. AAA is recommended for critical content but may limit design flexibility. Start with AA compliance, aim for AAA where possible, especially for body text.

Does this contrast checker work for colored backgrounds?

Yes! Enter any foreground and background color combination. The tool calculates contrast regardless of the colors used - it works for colored text on colored backgrounds, not just black/white combinations.

What about color blindness and contrast?

Good contrast ratio helps users with color blindness, but you should also avoid relying solely on color to convey information. Use our Color Blindness Simulator to test how your colors appear to users with different types of color vision deficiency.

How do I fix low contrast colors?

To increase contrast: darken the darker color or lighten the lighter color. For text, try darker text on light backgrounds or lighter text on dark backgrounds. The tool can suggest accessible alternatives that maintain your color scheme.

What is the contrast requirement for UI components?

WCAG 2.1 requires 3:1 contrast for UI components (buttons, form fields, focus indicators) and graphical objects that convey information. This applies to the component's visual boundary against adjacent colors.

Does contrast matter for images and icons?

Icons that convey meaning need 3:1 contrast against their background. Decorative images don't have contrast requirements, but informational images should have sufficient contrast. Always provide alt text for important images.

Is my color data private when checking contrast?

Yes! All contrast calculations happen 100% in your browser using JavaScript. No data is sent to any server, stored, or logged. Your color values remain completely private on your device.

What is color contrast and why is it important for accessibility?

Color contrast is the difference in luminance between foreground and background colors. Good contrast ensures text is readable for people with low vision, color blindness, or in challenging lighting conditions. It's a key requirement for web accessibility (WCAG).

How do I check color contrast online for free?

Enter your foreground (text) color and background color using the color pickers or HEX/RGB values. The tool instantly calculates the contrast ratio and shows WCAG AA and AAA compliance for normal text, large text, and UI components.

What is WCAG and what are the contrast requirements?

WCAG (Web Content Accessibility Guidelines) are international standards for web accessibility. WCAG 2.1 requires: AA level - 4.5:1 for normal text, 3:1 for large text and UI components. AAA level - 7:1 for normal text, 4.5:1 for large text.

What contrast ratio is required for WCAG AA compliance?

WCAG AA requires 4.5:1 contrast ratio for normal text (under 18pt or 14pt bold) and 3:1 for large text (18pt+ or 14pt+ bold). UI components and graphical objects also need 3:1. AA is the standard requirement for most websites.

What contrast ratio is required for WCAG AAA compliance?

WCAG AAA requires 7:1 contrast ratio for normal text and 4.5:1 for large text. AAA is the highest level of accessibility, recommended for critical content like government sites, healthcare, and educational materials.

What is considered large text in WCAG?

Large text is 18pt (24px) or larger regular weight, or 14pt (18.67px) or larger bold weight. Large text has lower contrast requirements (3:1 for AA, 4.5:1 for AAA) because larger text is inherently easier to read.

What is the maximum contrast ratio possible?

The maximum contrast ratio is 21:1, achieved with pure black (#000000) on pure white (#FFFFFF) or vice versa. The minimum is 1:1 (same color). Higher ratios mean better readability, but extremely high contrast can cause eye strain for some users.

How is contrast ratio calculated?

Contrast ratio uses relative luminance of both colors: (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color's luminance. Luminance is calculated from RGB values using a formula that accounts for human perception of different colors.

Should I always aim for WCAG AAA compliance?

AA is the standard requirement for most websites and is legally required in many jurisdictions. AAA is recommended for critical content but may limit design flexibility. Start with AA compliance, aim for AAA where possible, especially for body text.

Does this contrast checker work for colored backgrounds?

Yes! Enter any foreground and background color combination. The tool calculates contrast regardless of the colors used - it works for colored text on colored backgrounds, not just black/white combinations.

What about color blindness and contrast?

Good contrast ratio helps users with color blindness, but you should also avoid relying solely on color to convey information. Use our Color Blindness Simulator to test how your colors appear to users with different types of color vision deficiency.

How do I fix low contrast colors?

To increase contrast: darken the darker color or lighten the lighter color. For text, try darker text on light backgrounds or lighter text on dark backgrounds. The tool can suggest accessible alternatives that maintain your color scheme.

What is the contrast requirement for UI components?

WCAG 2.1 requires 3:1 contrast for UI components (buttons, form fields, focus indicators) and graphical objects that convey information. This applies to the component's visual boundary against adjacent colors.

Does contrast matter for images and icons?

Icons that convey meaning need 3:1 contrast against their background. Decorative images don't have contrast requirements, but informational images should have sufficient contrast. Always provide alt text for important images.

Is my color data private when checking contrast?

Yes! All contrast calculations happen 100% in your browser using JavaScript. No data is sent to any server, stored, or logged. Your color values remain completely private on your device.

Color Contrast Checker

simple

Check WCAG color contrast ratios for accessibility. Verify AA and AAA compliance for text and UI components.

Color Toolscontrastwcagaccessibilitya11y

100% Private - Runs Locally

How to Use

1Enter foreground and background colors
2View contrast ratio
3Check AA/AAA compliance
4Swap colors to test

Examples

High Contrast (Black on White)

Input

Foreground: #000000, Background: #FFFFFF

Output

Ratio: 21:1 - AAA for all text

Medium Contrast

Input

Foreground: #3b82f6, Background: #FFFFFF

Output

Ratio: 4.5:1 - AA for normal text

Low Contrast (Fails)

Input

Foreground: #94a3b8, Background: #FFFFFF

Output

Ratio: 2.8:1 - Fails WCAG requirements

Frequently Asked Questions

Related Tools

View all

Color Picker

Pick colors and convert between HEX, RGB, HSL, HSV, and CMYK formats. Visual color selection with eyedropper tool support.

Color Blindness Simulator

Advanced color blindness simulator with image processing, palette testing, and WCAG contrast checking for all vision types including protanopia, deuteranopia, and tritanopia.