This template is used onapproximately 165,000 pages. To avoid major disruption and server load, any changes should be tested in the template's/sandbox or/testcases subpages, or in your ownuser subpage. The tested changes can be added to this page in a single edit. Consider discussing changes on thetalk page before implementing them.
This template determines the pair of colors with the larger contrast ratio: color1/color2 or color1/color3. This is useful for selecting a foreground/background color pair. For accessibility,WCAG 2.0 AA guidelines require a contrast ratio of 3 or larger for large text, and 4.5 or larger for normal sized text.
In the default mode, color2 and color3 are white and black, and the selected color pair will always have a contrast ratio greater than 4.58.
Parameters
A color input can be by name ("khaki") or hextriplet with/without #-prefix ("#F0E68C", "F0E68C")
|1= (required): background color
|2= first fontcolor. Optional, default = white (#FFFFFF)
|3= second fontcolor. Optional, default = black (#000000)
The template returns the fontcolor with the greatest contrast
background is Khaki (#F0E68C): {{Greater color contrast ratio|khaki|white|black}} → black
background is RoyalBlue (#4169E1): {{Greater color contrast ratio|#4169E1|FFFFFF|000000}} → FFFFFF(=white)
css text
|css=y makes the template return css-ready text:
Khaki (#F0E68C):{{Greater color contrast ratio|khaki|white|black|css=y}}
→background-color:khaki; color:black;
Example 1, Khaki (#F0E68C)
<span>Example text on khaki background.</span>
→<span>Example text on khaki background.</span>
→Example text on khaki background.
Example 2, #4169E1 (RoyalBlue)
<span>Example text on #4169E1 background.</span>
→<span>Example text on #4169E1 background.</span>
→Example text on #4169E1 background.
bias
|bias=number: reduces contrast-check. A bias of 1.25, reduces the possible minimum to 4.0, which may not meet accessibility standards.
This parameter should be used with caution to ensureaccessibility. As stated above, when used without a bias, and with color2 and color3 equal to white and black, the selected color pair will always have a contrast ratio greater than 4.58.
Examples
Navy
<span>Navy</span> →Navy
<span>Navy</span> →Navy
<span>Navy</span> →Navy
Red
<span>Red</span> →Red
<span>Red</span> →Red
<span>Red</span> →Red
White
<span>White</span> →White
<span>White</span> →White
Black
<span>Black</span> →Black
<span>Black</span> →Black
#005500
<span>#005500</span> →#005500
<span>#005500</span> →#005500
<span>005500</span> →005500
<span>005500</span> →005500
CC5500
<span>CC5500</span> →CC5500
<span>CC5500</span> →CC5500
CC5500,|bias=1
<span>CC5500</span> →CC5500
<span>CC5500</span> →CC5500
error
<span>Not a color</span> →Not a color
<span>Not a color</span> →Not a color
(returnsbackground-color:Not a color; color:;, and so no color is set; defaults to black-on-white.)
<span>Not a color</span> →Not a color
(returnsbackground-color:Navy; color:;, and so nofontcolor is set; defaults to black. The template did not function.)
