Tool Lockers
Developer utilities

Inspect & test

Color Converter & Contrast Checker

Convert HEX, RGB, and HSL colors, then check a foreground/background pair against WCAG contrast thresholds.

Color conversion

#0E7490

rgb(14, 116, 144)

hsl(193 82% 31%)

Text contrast

Sample text preview

Contrast ratio: 11.97:1

Passes WCAG AAA for normal text

Practical guide

Using the Color Converter & Contrast Checker

Convert CSS colors and test WCAG text contrast.

Example

Input

Text: #17324D
Background: #F4F5EF

Expected result

A contrast ratio and WCAG AA/AAA guidance for normal and large text.

Supported inputs

  • 3- or 6-digit HEX colors, RGB values, and HSL values.
  • A foreground/background pair for contrast calculation.

Limitations

  • The contrast result evaluates color values, not font weight, surrounding context, or every accessibility requirement.
  • Use the applicable WCAG criteria and test the rendered design.

Frequently asked questions

What contrast ratio should normal text meet?

WCAG AA generally requires 4.5:1 for normal text; large text has a 3:1 threshold. AAA thresholds are higher.

Does a passing result guarantee an accessible design?

No. This checks color contrast only. It does not evaluate keyboard access, semantics, focus visibility, or other accessibility needs.