Skip to content

Color Contrast Checker

Check the WCAG 2.1 contrast ratio between a text and background color in hex, rgb() or hsl(), with AA and AAA results for normal and large text.

Color Contrast Checker

Foreground color

Background color

Aa

Sample text

Smaller text preview

Contrast ratio 21.00 to 1. Normal text passes AA, large text passes AA.

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.

Updated . Provided as is. Check the output before you rely on it in production.

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.

Questions and answers

What is WCAG 2.1 contrast ratio?
It is the luminance ratio between text and its background, from 1:1 to 21:1; WCAG AA asks for 4.5:1 for normal text and 3:1 for large text, AAA for 7:1 and 4.5:1. This checker computes the ratio from your two colors, shows a live preview and marks each of the four levels pass or fail.
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. It shows separate pass/fail results for normal text and for large text (18pt, or 14pt bold), which WCAG lets use a lower contrast ratio because it is easier to read.
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.

Use it as an API

Color Contrast Checker is also callable as a free HTTP JSON API at https://aidevhub.io/api/color-contrast-checker/ — GET with query parameters or POST with a JSON body, no authentication, CORS enabled, fair use (abusive traffic is throttled at the edge; there is no per-request quota header). Responses return { ok, tool, result, meta }. 

curl -s "https://aidevhub.io/api/color-contrast-checker/?foreground=%23ffffff&background=%230a0a0a"

Machine-readable contract: /api/tool/color-contrast-checker.json All API endpoints: /agents/ LLM site index: /llms.txt

For AI agents: how to call this tool

Machine-readable contract, endpoints and examples. Humans can ignore this section.

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