Template:Greater color contrast ratio/doc: Difference between revisions
| [checked revision] | [checked revision] |
Caleb Cooper (talk | contribs) Created page with "{{Documentation subpage}} <!-- Please place categories where indicated at the bottom of this page and interwikis at Wikidata (see Wikipedia:Wikidata) --> {{High-use}} {{Lu..." |
Caleb Cooper (talk | contribs) |
||
| Line 33: | Line 33: | ||
== See also == |
== See also == |
||
For more detail see wikipedia [[wikipedia:Template:Greater color contrast ratio]] |
|||
* {{tl|Ensure AAA contrast ratio}} |
|||
* {{tl|Ensure AA contrast ratio}} |
|||
* {{section link|Template:Color contrast conformance|HTML colors}} |
|||
* {{section link|Wikipedia:Manual of Style/Accessibility|Color}} |
|||
<includeonly>{{Sandbox other|| |
<includeonly>{{Sandbox other|| |
||
Latest revision as of 11:37, 19 October 2020
 | This template is used on many pages and changes may be widely noticed. Test changes in the template's /sandbox or /testcases subpages, or in your own user subpage. Consider discussing changes on the talk page before implementing them. |
 | This template uses Lua: |
 |
This page was automatically imported from Commons any changes will be overwritten, the source page is here () |
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. When used in the default mode, with color2 and color3 equal to white and black, the selected color pair will always have a contrast ratio greater than 4.58.
Examples
<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<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 color
Optional parameters
The bias parameter should be used with caution to ensure accessibility. 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. A bias of 1.25, reduces the possible minimum to 4.0, which may not meet accessibility standards.
See also
For more detail see wikipedia wikipedia:Template:Greater color contrast ratio