Template:Greater color contrast ratio/doc: Difference between revisions
Dat Hack3r (talk | contribs) Create template documentation |
Dat Hack3r (talk | contribs) m Update to latest version of WCAG guidelines |
||
| (2 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
{{Tlx|Greater color contrast ratio}} determines which of two colors has | {{Lua|Module:Color contrast}} | ||
{{Tlx|Greater color contrast ratio}} determines which of two colors has more contrast relative to a given color. This is useful for selecting a foreground/background color pair. By default, the two candidate colors are white and black, and the selected color pair will always have a contrast ratio greater than 4.58. [http://www.w3.org/TR/WCAG22/#contrast-minimum WCAG 2.2 AA guidelines] require a contrast ratio of at least 3 for large text and at least 4.5 for normal sized text. Colors can be specified by name (e.g., <code>royalblue</code>) or as hex triplets, with or without the <code>#</code> prefix (e.g., <code>#4169e1</code>, <code>4169e1</code>). | |||
* {{tlx|Greater color contrast ratio|royalblue}} → | * {{tlx|Greater color contrast ratio|royalblue}} → | ||
| Line 18: | Line 19: | ||
If {{para|css|y}} is set, the template will return valid {{wp|CSS}}. | If {{para|css|y}} is set, the template will return valid {{wp|CSS}}. | ||
* {{tlx|Greater color contrast ratio|royalblue|<nowiki>css=yes</nowiki>}} | |||
*: {{Greater color contrast ratio|royalblue|css=yes}} | |||
* <nowiki><span style="</nowiki>{{tlx|Greater color contrast ratio|royalblue|<nowiki>css=yes</nowiki>}}<nowiki>">Text with a royalblue background</span></nowiki> | * <nowiki><span style="</nowiki>{{tlx|Greater color contrast ratio|royalblue|<nowiki>css=yes</nowiki>}}<nowiki>">Text with a royalblue background</span></nowiki> | ||
*: <span style="{{Greater color contrast ratio|royalblue|css=yes}}">Text with a royalblue background</span> | *: <span style="{{Greater color contrast ratio|royalblue|css=yes}}">Text with a royalblue background</span> | ||
| Line 23: | Line 26: | ||
*: <span style="{{Greater color contrast ratio|royalblue|cyan|yellow|css=yes}}">Text with a royalblue background</span> | *: <span style="{{Greater color contrast ratio|royalblue|cyan|yellow|css=yes}}">Text with a royalblue background</span> | ||
{{para|bias|''number''}} specifies a tolerance by which the first color may have a lower contrast ratio than the second and still be | {{para|bias|''number''}} specifies a tolerance by which the first color may have a lower contrast ratio than the second and still be selected. | ||
* {{tlx|Greater color contrast ratio|royalblue|black|white|<nowiki>bias=0.5</nowiki>}} | * {{tlx|Greater color contrast ratio|royalblue|black|white|<nowiki>bias=0.5</nowiki>}} | ||