 | This is a documentation subpage for Template:Greater color contrast ratio. It may contain usage information, categories and other content that is not part of the original template page. |
 | This template is used on approximately 152,000 pages. To avoid major disruption and server load, any changes should be tested in the template's /sandboxor/testcases subpages, or in your own user subpage. The tested changes can be added to this page in a single edit. Consider discussing changes on the talk page before implementing them. |
 | This template uses Lua:
|
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.
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)|css=y makes the template return css-ready text:{{Greater color contrast ratio|khaki|white|black|css=y}}<span style="font-size:110%; {{Greater color contrast ratio|khaki|white|black|css=y}}">Example text on khaki background.</span><span style="font-size:110%; background-color:khaki; color:black;">Example text on khaki background.</span><span style="font-size:110%; {{Greater color contrast ratio|#4169E1|#ffffff|#000000|css=y}}">Example text on #4169E1 background.</span><span style="font-size:110%; background-color:#4169E1; color:#ffffff;">Example text on #4169E1 background.</span>|bias=number: reduces contrast-check. A bias of 1.25, reduces the possible minimum to 4.0, which may not meet accessibility standards.<span style="background:navy; color:{{Greater color contrast ratio|navy|white|black}}">Navy</span> → Navy<span style="{{Greater color contrast ratio|navy|white|black|css=y}}">Navy</span> → Navy<span style="{{Greater color contrast ratio|navy|css=y}}">Navy</span> → Navy<span style="background:red; color:{{Greater color contrast ratio|red|white|black}}">Red</span> → Red<span style="{{Greater color contrast ratio|red|white|black|css=y}}">Red</span> → Red<span style="{{Greater color contrast ratio|red|css=y}}">Red</span> → Red<span style="background:white; color:{{Greater color contrast ratio|white|white|black}}">White</span> → White<span style="{{Greater color contrast ratio|white|white|black|css=y}}">White</span> → White<span style="background:black; color:{{Greater color contrast ratio|black|white|black}}">Black</span> → Black<span style="{{Greater color contrast ratio|black|white|black|css=y}}">Black</span> → Black<span style="background:#005500; color:{{Greater color contrast ratio|#005500|#FFFFFF|#000000}}">#005500</span> → #005500<span style="{{Greater color contrast ratio|#005500|#FFFFFF|#000000|css=y}}">#005500</span> → #005500<span style="background:#005500; color:#{{Greater color contrast ratio|005500|FFFFFF|000000}}">005500</span> → 005500<span style="{{Greater color contrast ratio|005500|FFFFFF|000000}}">005500</span> → 005500<span style="background:#CC5500; color:#{{Greater color contrast ratio|CC5500|FFFFFF|000000}}">CC5500</span> → CC5500<span style="{{Greater color contrast ratio|CC5500|FFFFFF|000000|css=y}}">CC5500</span> → CC5500|bias=1<span style="background:#CC5500; color:#{{Greater color contrast ratio|CC5500|FFFFFF|000000|bias=1}}">CC5500</span> → CC5500<span style="{{Greater color contrast ratio|CC5500|FFFFFF|000000|bias=1|css=y}}">CC5500</span> → CC5500<span style="background:Not a color; color:#{{Greater color contrast ratio|Not a color|FFFFFF|000000}}">Not a color</span> → Not a color<span style="{{Greater color contrast ratio|Not a color|FFFFFF|000000|css=y}}">Not a color</span> → Not a colorbackground-color:Not a color; color:;, and so no color is set; defaults to black-on-white.)<span style="{{Greater color contrast ratio|Navy|Not a color|000000|css=y}}">Not a color</span> → Not a colorbackground-color:Navy; color:;, and so no fontcolor is set; defaults to black. The template did not function.)
