Color in hexadecimal, RGB or with CSS color keywords.
Example: #FFFFFF, rgb(255,255,255) or white

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 / 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 AA

Two elements (size and bold) gives four combinations:

Level AAA

For level AAA the logic is the same, 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 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.