Please fill in the following fields :

The color should be between #000000 and #FFFFFF
Invalid color
The color should be between #000000 and #FFFFFF
Invalid color
Gimme

Help

Text color / Foreground

It is the text color. You can fill in this field with an hexadecimal value. i.e. #AABBCC color. Note that #ABC works also, we automatically complete the field with #AABBCC. You can also use this field without the # character, so FFF or FFFFFF works perfectly. The input value is then previewed on the right of the field.

Background

It is the background color. This field works as the text color fields.

Minimum ratio

Three possible values 3, 4.5 and 7.

How to choose a ratio? It depends on the following elements:

Level AA

Two elements (size and bold) gives four combinations:

Level AAA

For level AAA the logic is the same one, only the ratio increases in the the following way:

Text size understanding

For a full and exhaustive understanding of how to interpret text size, one should read the defintion of large-scale text from WCAG.

All details about the contrast ratio

Color to edit

It is either the foreground or the background. Default is foreground.

The color you choose will be modified until we find a valid color. The other color won't change.

The algorithms

A range of valid colors

The result is a wide range of colors.
This algorithm is very helpful if you are not sure about the hue of your initial color.

Valid colors and very close to initial color

The result is a list of colors close to the original color.
The aim is to have a valid color with a contrast as close to the selected ratio as possible (At the 0.001 range).

User Feedback

If you have any problems with or questions about Contrast-Finder, please contact us: