Color Contrast Checker

Foreground Color

Background Color

Aa

Sample Text

Smaller text preview

Contrast Ratio

21.00:1

Normal Text

✓ AA
✓ AAA

Large Text (18pt+)

✓ AA
✓ AAA

AA (4.5:1): Minimum contrast for normal text. AAA (7:1): Enhanced contrast. Large text has lower requirements.

What This Tool Does

Color Contrast Checker is built for deterministic developer and agent workflows.

Check WCAG 2.1 contrast ratios for foreground/background colors with AA and AAA pass/fail feedback for normal and large text.

Use How to Use for execution steps and FAQ for constraints, policies, and edge cases.

Last updated:

This tool is provided as-is for convenience. Output should be verified before use in any production or critical context.

Agent Invocation

Best Path For Builders

Dedicated API endpoint

Deterministic outputs, machine-safe contracts, and production-ready examples.

Dedicated API

https://aidevhub.io/api/color-contrast-checker/

OpenAPI: https://aidevhub.io/api/openapi.yaml

GET /api/color-contrast-checker/ GET color-contrast-checker
POST /api/color-contrast-checker/ POST color-contrast-checker

Unified Runtime API

https://aidevhub.io/api/tools/run/?toolId=color-contrast-checker&a=...

GET and POST are supported at /api/tools/run/ with identical validation and limits.

Limit: req / s, input max 128 KB.

How to Use Color Contrast Checker

  1. 1

    Enter foreground and background colors

    Use the color pickers or paste color values in hex (#RRGGBB), RGB (rgb(r,g,b)), or HSL (hsl(h,s%,l%)) format. The live preview updates instantly.

  2. 2

    Check WCAG compliance levels

    Review the contrast ratio and AA/AAA badges for both normal and large text. Green checkmarks mean pass, red X means fail. Use this to validate your color scheme meets accessibility standards.

  3. 3

    Compare text readability

    See how your chosen colors look with real sample text in the preview. Adjust colors until you achieve the contrast level you need—AA (4.5:1) for legal compliance, AAA (7:1) for maximum accessibility.

  4. 4

    Swap colors to test both directions

    Use the Swap control to test if the inverse color combination (light text on dark background vs dark on light) also meets your contrast needs. Useful for multi-variant designs.

  5. 5

    Copy ratio and integrate

    Once you find compliant colors, copy the ratio to clipboard and apply the color codes in your CSS, design tool, or style guide documentation.

Frequently Asked Questions

What is WCAG 2.1 contrast ratio?
WCAG 2.1 (Web Content Accessibility Guidelines) defines contrast ratios between foreground and background colors. Higher ratios indicate better readability for people with color blindness or low vision. AA requires 4.5:1 for normal text, 3:1 for large text. AAA requires 7:1 and 4.5:1 respectively.
Why is AA compliance important?
AA compliance is the minimum standard for accessible web design. It ensures text is readable for users with moderate vision impairment. Many organizations and countries require AA compliance by law. AAA is the enhanced standard for maximum accessibility.
What color formats does the checker support?
The Color Contrast Checker supports hex (#RRGGBB or #RGB), RGB (rgb(r, g, b)), and HSL (hsl(h, s%, l%)) formats. You can also use the color picker for visual selection. All formats are automatically converted to RGB for luminance calculation.
Can I check contrast for different text sizes?
Yes. The tool shows separate pass/fail results for normal text (requires higher contrast) and large text (18pt+, requires lower contrast). This allows you to use lower contrast ratios for larger, more readable text while maintaining standards for smaller text.
Is this tool free and does it store my data?
Yes. Free to use. Processing happens directly in your browser. Colors are not sent to external servers or stored anywhere. The tool is entirely client-side with no backend dependencies.