What is Contrast Finder?

Contrast-Finder is a tool which computes the contrast between two colors (background, foreground) and checks if the contrast is valid. When the contrast is not valid, the main target is to suggest some correct colors contrasts.

Contrast-Finder is designed to be used by webdesigners, web developers or web accessibility professionals to improve the readability of HTML pages and websites.

Help / How to use this tool?

The Contrast-Finder interface is a form with five mandatory fields.

Text color
Background color
Minimum ratio
Color to edit
Gimme

Text color / Foreground

This is the color of the text. You can fill in this field with color keyword, an hexadecimal value, or an RGB value. The input value is then previewed on the right of the field.

Color keyword

Example: Black, Silver, YellowGreen, MediumPurple.
Authorised values are those listed in CSS color keywords (from CSS level 1 to CSS level 4).

Color with hexadecimal values

Example: #AABBCC. Please 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.

Color with RGB values

Example: rgb(255,255,255).
You can also use a short syntax like 255,255,255, which be interpreted as rgb(255,255,255).

Background color

This is the color of the background.
This field works just like the text color field.

Minimum ratio

Three possible values 3, 4.5 and 7.

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

Level of accessibility wanted: AA or AAA.
Size of the text.
Is the text bold or not?

Level AA

Two elements (size and bold) gives four combinations:

Text not bold + text size < 24px: ratio = 4.5
Text not bold + text size > 24px: ratio = 3
Text bold + text size < 19px: ratio = 4.5
Text bold + text size > 19px: ratio = 3

Level AAA

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

4.5 ratio becomes 7
3 ratio becomes 4.5

Text size understanding

The 19px criteria can be understood as equivalent of 14pt or 120% or 1.2em.
The 24px criteria can be understood as equivalent of 18pt or 150% or 1.5em.

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 text or background color. Default is text color.

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

Gimme / The algorithms

“Valid colors and very close to initial color”

This is the default algorithm. It offers color options really close to the initial color. (Color distance is computed on on a mathematical basis, which may vary from a designer point of view.)

For some color combinations, the algorithm may not give any result ; in such a case, use the other algorithm.

“A range of valid colors”

This is the backup algorithm, in case the first one gives no result. Nevertheless, color options may be (strongly) different from the initial color.

User Feedback

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

Contribute to Contrast-Finder

All contributions are warmly welcome ! Translation, correction, bug report, new feature…
Feel free to play with source code, or discuss in the forum.