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.
Authorised values are those listed in CSS color keywords (from CSS level 1 to CSS level 4).
#AABBCC. Please 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.
You can also use a short syntax like
255,255,255, which be interpreted as
This is the color of the background.
This field works like the text color field.
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.
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.
This is the backup algorithm, in case the first one gives no result. Nevertheless, color options may be (strongly) different from the initial color.
If you have any problems with or questions about Contrast-Finder, please contact us: