Template:Greater color contrast ratio/doc: Difference between revisions
Dat Hack3r (talk | contribs) Create template documentation |
Dat Hack3r (talk | contribs) m Added {{Lua}} |
||
| (One intermediate revision 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/WCAG20/#visual-audio-contrast WCAG 2.0 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>}} | ||
Latest revision as of 13:55, 29 January 2026
 | This template uses Lua: |
{{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. WCAG 2.0 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., royalblue) or as hex triplets, with or without the # prefix (e.g., #4169e1, 4169e1).
{{Greater color contrast ratio|royalblue}}→- #FFFFFF
{{Greater color contrast ratio|#4169e1}}→- #FFFFFF
{{Greater color contrast ratio|4169e1}}→- #FFFFFF
{{Greater color contrast ratio|royalblue|#000000|#ffffff}}- #ffffff
{{Greater color contrast ratio|royalblue|#00ffff|#ffff00}}- #ffff00
{{Greater color contrast ratio|royalblue|black|white}}- white
{{Greater color contrast ratio|royalblue|cyan|yellow}}- yellow
If |css=y is set, the template will return valid CSS.
{{Greater color contrast ratio|royalblue|css=yes}}- background-color:royalblue; color:#FFFFFF;
- <span style="
{{Greater color contrast ratio|royalblue|css=yes}}">Text with a royalblue background</span>- Text with a royalblue background
- <span style="
{{Greater color contrast ratio|royalblue|cyan|yellow|css=yes}}">Text with a royalblue background</span>- Text with a royalblue background
|bias=number specifies a tolerance by which the first color may have a lower contrast ratio than the second and still be selected.
{{Greater color contrast ratio|royalblue|black|white|bias=0.5}}- white
{{Greater color contrast ratio|royalblue|black|white|bias=0.6}}- black
{{Greater color contrast ratio|royalblue|cyan|yellow|bias=0.6}}- yellow
{{Greater color contrast ratio|royalblue|cyan|yellow|bias=0.7}}- cyan
TemplateData
This template determines which of two colors has the higher contrast relative to a given color.
| Parameter | Description | Type | Status | |
|---|---|---|---|---|
| Base color | 1 | The reference color against which contrast is measured (typically the background color)
| String | required |
| First option | 2 | The first candidate color to compare for contrast against the base color.
| String | optional |
| Second option | 3 | The second candidate color to compare for contrast against the base color.
| String | optional |
| CSS | css | If set to anything, returns valid CSS in the form of "color: …; background-color: …;" instead of a raw color value | Boolean | optional |
| Bias | bias | A numeric tolerance that favors the first option. The first color may have a contrast ratio up to bias less than the second color and still be selected.
| Number | optional |