WCAG Color Contrast Checker

Evaluate the contrast ratio of text and background colors based on WCAG 2.1 guidelines. Instantly generate accessible color adjustments.

HEX/RGB/HSL
HEX/RGB/HSL
Everything runs locally in your browser.

Live Text Preview

Large Heading (18pt Bold / 24pt Regular)

This is a preview of the large heading text style.

Normal Text (Under 18pt)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel massa lectus.

Contrast Ratio

18.6:1

WCAG 2.1 Compliance Status

WCAG AA Requirements
Normal Text (4.5:1) PASS
Large Text (3.0:1) PASS
WCAG AAA Requirements
Normal Text (7.0:1) PASS
Large Text (4.5:1) PASS

WCAG 2.1 Guidelines

Easily verify contrast standards to build accessible interfaces that comply with Section 508, ADA, and WCAG AA or AAA guidelines.

Suggestions Engine

Automatically adjust colors incrementally along HSL coordinates to find the closest alternatives that meet the contrast ratio criteria.

Fully Client-Side

Computations are executed locally within your browser context. No colors, files, or telemetry coordinates are transmitted to our servers.

Related Color Tools

HEX RGB HSL Color Converter
Convert colors and adjust lightness coordinates.
Image Color Picker
Extract color palettes from design mockups.
CSS Color Converter
Convert between CMYK, HSV, RGB, HSL, and HEX formats.

Color Contrast Checker

Calculate WCAG contrast ratios for foreground and background colors and show common text-size results.

Input
Two valid CSS colors and optional preview text.
Output
A contrast ratio with WCAG AA and AAA pass or fail indicators.
Real limitations
The calculation covers luminance contrast only; it does not certify an interface or account for font rendering, motion, focus, or non-color cues.
Privacy and data handling
two valid CSS colors and optional preview text is processed in this browser tab. Convertr does not receive or store it; closing or reloading the page clears the working state unless the tool explicitly offers a local download.

How to use this tool

  1. Provide two valid CSS colors and optional preview text in the tool controls.
  2. Choose the settings that affect a contrast ratio with WCAG AA and AAA pass or fail indicators, then run the tool.
  3. Review a contrast ratio with WCAG AA and AAA pass or fail indicators before copying or downloading it.

Common failure modes

Invalid colors cannot be measured, and transparency without a resolved background can make a ratio meaningless.

Useful example

Compare #1f2937 text on #ffffff to review its ratio for normal and large text.