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
FFFFFF works perfectly. The input value is then previewed on the right of the field.
It is the background color. This field works as the text color fields.
Three possible values 3, 4.5 and 7.
How to choose a ratio? It depends on the following elements:
Two elements (size and bold) gives four combinations:
18px: ratio = 4.5
18px: ratio = 3
14px: ratio = 4.5
14px: ratio = 3
For level AAA the logic is the same one, only the ratio increases in the the following way:
14pxcriteria can be understood as equivalent of
18pxcriteria can be understood as equivalent of
For a full and exhaustive understanding of how to interpret text size, one should read the defintion of large-scale text from WCAG.
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 result is a wide range of colors.
This algorithm is very helpful if you are not sure about the hue of your 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).
If you have any problems with or questions about Contrast-Finder, please contact us:
You are invited to contribute new features, fixes, or updates, large or small; we are always thrilled to receive pull requests, and do our best to process them as fast as we can.