Color Tools

Processed in your browser

Convert a color

HEX, RGB, or HSL

HEX#103E3B

RGBrgb(16, 62, 59)

HSLhsl(176.1, 59%, 15.3%)

Try this color in the contrast checker

Accepts 3- or 6-digit HEX, RGB values or percentages, and HSL. Colors are opaque; HSL output is rounded to one decimal.

Check text contrast

Text color

Background color

A little more clarity.

Useful tools. Less effort. The quick brown fox jumps over the lazy dog.

11.09:1

Contrast ratio · WCAG 2 text thresholds

AA normalPass

AAA normalPass

AA largePass

AAA largePass

Large text is at least 24 px regular or about 19 px bold. Pass/fail uses the unrounded ratio and checks this color pair only.

How to use Color Tools

Enter an opaque HEX, RGB, or HSL color.
Inspect its other representations or choose a second color for contrast.
Copy a format and check the contrast result for your intended text size.

Try an example

Compare #000000 text with a #FFFFFF background.

A 21:1 contrast ratio. A passing color pair alone does not establish accessibility for an entire page.

What to know before using Color Tools

Enter 3- or 6-digit HEX, RGB, or HSL to inspect and copy color formats. Alpha transparency and named CSS colors are not supported. Compare text and background colors using WCAG 2 contrast thresholds: 4.5:1 for normal AA text, 7:1 for normal AAA text, 3:1 for large AA text, and 4.5:1 for large AAA text. Large text is at least 24 px regular or about 19 px bold. Rounded display values do not affect pass/fail. This checks a color pair, not overall page accessibility.