Color Contrast Checker

Ensure your color combinations meet WCAG accessibility standards

Color Selection

Closest: white
Closest: black

Preview & Results

21:1

Contrast Ratio

AA Pass
AAA Pass
The quick brown fox jumps over the lazy dog

Accessibility Analysis

  • • AA standard: minimum for web content
  • • AAA standard: enhanced accessibility
  • • Large text requires lower ratios
  • • Test with color blindness simulations

WCAG Contrast Guidelines Reference

Normal Text Requirements

WCAG AA:
4.5:1 minimum
WCAG AAA:
7:1 minimum

Large Text Requirements

WCAG AA:
3:1 minimum
WCAG AAA:
4.5:1 minimum

Large text is defined as 18pt (24px) or 14pt (18.66px) bold and larger. UI components like buttons and form controls should meet the same standards as large text.

    Related tools

    Box Shadow Generator

    Visual CSS box-shadow generator. Create beautiful shadows with live preview and copy the CSS code.

    Color Converter

    Convert colors between multiple formats (HEX, RGB, HSL, HSV, CMYK, LAB) with color blindness simulation, named colors, and batch processing

    Color Extractor

    Extract colors from uploaded images by hovering over pixels to get precise color values.

    Color Generator

    Generate color palettes, analyze colors, and create gradients with this comprehensive color tool.

    CSS Filter Generator

    Advanced visual CSS filter generator with Instagram-style presets, custom image upload, drop-shadow effects, and multi-format export capabilities.

    CSS Gradient Generator

    Visual CSS gradient generator. Create linear and radial gradients with multiple color stops and copy the CSS code.