ImageColorPicker.com

Color contrast checker

Test the contrast ratio between foreground and background colors to ensure accessibility.

Check your colors

Test color combinations to ensure they meet WCAG accessibility standards for text readability.

7.25 to 1
Contrast
AAA
Text result
Very good

Compared: #FFFFFF on #7C4A38

Text

16px, Regular (400)

Counts as normal text.

  • AA (WCAG 1.4.3): at least 4.5:1

    Pass

  • AAA (WCAG 1.4.6): at least 7:1

    Pass

UI components and graphics

Icons, input borders, focus indicators and other parts you need to see to use the interface.

  • AA (WCAG 1.4.11): at least 3:1

    Pass
7.25 to 1. Text: passes AA, passes AAA. UI components: passes.
How this is checked
Colors compared (after blending)
Text #FFFFFF on background #7C4A38
Relative luminance
Text 1.0000, background 0.0946
Formula
(L1 + 0.05) / (L2 + 0.05) where L1 is the luminance of the lighter color and L2 of the darker one.
Exact ratio
7.2573 to 1, shown as 7.25 to 1. The shown value is cut off, not rounded, so it never looks better than it is. The exact value is what is compared with the requirement.

Text size: 16px, Regular (400)

Counts as normal text. Large text is at least 24px (18pt), or at least 18.67px (14pt) when bold (weight 700 or more). Sizes are shown cut off, not rounded.

Counts as normal text. Large text is at least 24px (18pt), or at least 18.67px (14pt) when bold (weight 700 or more). Sizes are shown cut off, not rounded.

Aa
Preview title

The quick brown fox jumps over the lazy dog

Small text example (12px)

Text
#ffffff
Background
#7c4a38

WCAG standards

Level AA

Minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. Required for most websites.

Level AAA

Enhanced contrast ratio of 7:1 for normal text and 4.5:1 for large text. Recommended for optimal accessibility.

Color contrast checker

Calculate the contrast ratio of text and background colors.

Choose a color using the color picker for text and background color or enter a color in RGB hexadecimal format (e.g., #259 or #2596BE). You can adjust the slider to select color. The Web Content Accessibility Guidelines (WCAG) has a specific guideline to help figure out whether text is readable for sighted users. This criteria uses a particular algorithm to map color combinations into comparable ratios. Using this formula, WCAG states that a 4.5:1 color contrast ratio with text and its background is adequate for regular (body) text, and large text (18+ pt regular, or 14+ pt bold) should have at least a 3:1 color contrast ratio.

Key features

  • Real-time contrast ratio calculation
  • WCAG AA & AAA compliance checking
  • HSL sliders for fine-tuning
  • Multiple preview formats

Advanced tools

  • Automatic color fixing
  • Text and background samples
  • Color name detection
  • Export results

Frequently asked questions

For WCAG AA compliance, normal text requires a minimum contrast ratio of 4.5:1, while large text (18pt or 14pt bold) requires 3:1.

WCAG AAA requires higher contrast ratios: 7:1 for normal text and 4.5:1 for large text, compared to AA's 4.5:1 and 3:1 respectively.

Use our automatic fix feature to adjust either text or background colors while maintaining your design intent, or manually adjust colors using HSL sliders with visual indicators showing optimal zones for AA/AAA compliance.

The green zones and AA/AAA markers show optimal ranges for achieving WCAG compliance. The direction hints (Lighter/Darker) guide you toward better contrast based on your current color combination.

Yes, you can enter any hex color codes or use the color picker to select custom colors. The URL updates automatically so you can share specific color combinations.