Small tools. Better flow.

Color & contrast Usage guide

Convert colors, create palettes, and check WCAG contrast.

Open tool

Put it to work

Compare #b6ebbd with #101415 against AA and AAA text contrast thresholds.

From input to output

  1. Open Color & contrast and load the example.
  2. Read the format notes, choose your options, and replace the example with your input. Start with test data instead of sensitive information.
  3. Run the tool and inspect the result and status. If an error appears, correct the input format and run it again.
  4. Copy the output or download a file. Generated and converted results are not saved automatically.

Contrast is not just color distance

WCAG contrast compares relative luminance after linearizing sRGB channels. Black against white yields 21:1; identical colors yield 1:1. AA requires 4.5:1 for normal text and 3:1 for large text, generally at least 18 pt or bold 14 pt. This tool compares two opaque colors; with transparency or a background image, first determine the actual composited colors. Passing a color check does not certify the accessibility of an entire page.

Example input

Foreground: #ffffff
Background: #000000

Reading the result

Contrast: 21.00:1
AA normal / large text: PASS
AAA normal / large text: PASS

Details that matter

Format and meaning

Convert HEX, RGB, and HSL. Contrast uses two opaque sRGB colors.

Using it correctly

WCAG AA requires 4.5:1 for normal text and 3:1 for large text.

Common pitfalls

The palette varies the base color’s lightness as a starting point. Check each pairing separately.

Supported scope and limits

Opaque HEX, RGB, HSL; WCAG 2.x contrast formula

Split inputs that exceed the limit. If a format or algorithm is unsupported, choose a tool that matches your requirements instead of silently changing the format.

What happens to your data?

Tools run in your browser. DNS lookup sends the queried domain to the named external provider. Ads may appear on home, guide, and workspace pages according to settings.

Open tool