Web/CSS Color Contrast Checker

A tool to check the brightness difference, and color contrast between two colors for text readability and for compliance with W3C accessibility guidelines.

You can bookmark this page and it will remember the colors you have added, or clear the colors.

Load Colors From:
Stylesheet:


Manualy Add

Note: Stylesheet can have colors specified as #ffffff, #fff or rgb(255,255,255).


Backgrounds
Contrast Lorem ipsum dolor. Foreground:
Background:
Brightness Difference:
Color Difference:
This combination is

For colors to be compliant brightness should be above 125 and color difference should be above 500.

Click on a foreground or bckground color to use it in a comparison.

Foregrounds

Designed after the Color Contrast Checker by Jonathan Snook with specific enhancements to check existing styles.