Template:Greater color contrast ratio/doc: Difference between revisions
Jump to navigation
Jump to search
m (1 revision imported) |
|
(No difference)
| |
Latest revision as of 15:24, 23 October 2022
Lua error: Internal error: The interpreter exited with status 127. Lua error: Internal error: The interpreter exited with status 127. Lua error: Internal error: The interpreter exited with status 127.
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") <span class="legend-color mw-no-invert" style="Lua error: Internal error: The interpreter exited with status 127.">
|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 <span class="legend-color mw-no-invert" style="Lua error: Internal error: The interpreter exited with status 127."> Khaki (#F0E68C): {{Greater color contrast ratio|khaki|white|black}} → Lua error: Internal error: The interpreter exited with status 127.
- background is <span class="legend-color mw-no-invert" style="Lua error: Internal error: The interpreter exited with status 127."> RoyalBlue (#4169E1): {{Greater color contrast ratio|#4169E1|FFFFFF|000000}} → Lua error: Internal error: The interpreter exited with status 127. (=white)
- css text
|css=ymakes the template return css-ready text:
- <span class="legend-color mw-no-invert" style="Lua error: Internal error: The interpreter exited with status 127."> Khaki (#F0E68C):
{{Greater color contrast ratio|khaki|white|black|css=y}} - → Lua error: Internal error: The interpreter exited with status 127.
- <span class="legend-color mw-no-invert" style="Lua error: Internal error: The interpreter exited with status 127."> Khaki (#F0E68C):
- Example 1, <span class="legend-color mw-no-invert" style="Lua error: Internal error: The interpreter exited with status 127."> Khaki (#F0E68C)
<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%; Lua error: Internal error: The interpreter exited with status 127.">Example text on khaki background.
- Example 2, <span class="legend-color mw-no-invert" style="Lua error: Internal error: The interpreter exited with status 127."> #4169E1 (RoyalBlue)
<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> - → <span style="font-size:110%; Lua error: Internal error: The interpreter exited with status 127.">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 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.
Examples
- Navy
<span style="background:navy; color:Lua error: Internal error: The interpreter exited with status 127.">Navy</span>→ <span style="background:navy; color:Lua error: Internal error: The interpreter exited with status 127.">Navy<span style="Lua error: Internal error: The interpreter exited with status 127.">Navy</span>→ <span style="Lua error: Internal error: The interpreter exited with status 127.">Navy<span style="Lua error: Internal error: The interpreter exited with status 127.">Navy</span>→ <span style="Lua error: Internal error: The interpreter exited with status 127.">Navy
- Red
<span style="background:red; color:Lua error: Internal error: The interpreter exited with status 127.">Red</span>→ <span style="background:red; color:Lua error: Internal error: The interpreter exited with status 127.">Red<span style="Lua error: Internal error: The interpreter exited with status 127.">Red</span>→ <span style="Lua error: Internal error: The interpreter exited with status 127.">Red<span style="Lua error: Internal error: The interpreter exited with status 127.">Red</span>→ <span style="Lua error: Internal error: The interpreter exited with status 127.">Red
- White
<span style="background:white; color:Lua error: Internal error: The interpreter exited with status 127.">White</span>→ <span style="background:white; color:Lua error: Internal error: The interpreter exited with status 127.">White<span style="Lua error: Internal error: The interpreter exited with status 127.">White</span>→ <span style="Lua error: Internal error: The interpreter exited with status 127.">White
- Black
<span style="background:black; color:Lua error: Internal error: The interpreter exited with status 127.">Black</span>→ <span style="background:black; color:Lua error: Internal error: The interpreter exited with status 127.">Black<span style="Lua error: Internal error: The interpreter exited with status 127.">Black</span>→ <span style="Lua error: Internal error: The interpreter exited with status 127.">Black
- #005500
<span style="background:#005500; color:Lua error: Internal error: The interpreter exited with status 127.">#005500</span>→ <span style="background:#005500; color:Lua error: Internal error: The interpreter exited with status 127.">#005500<span style="Lua error: Internal error: The interpreter exited with status 127.">#005500</span>→ <span style="Lua error: Internal error: The interpreter exited with status 127.">#005500<span style="background:#005500; color:#Lua error: Internal error: The interpreter exited with status 127.">005500</span>→ <span style="background:#005500; color:#Lua error: Internal error: The interpreter exited with status 127.">005500<span style="Lua error: Internal error: The interpreter exited with status 127.">005500</span>→ <span style="Lua error: Internal error: The interpreter exited with status 127.">005500
- CC5500
<span style="background:#CC5500; color:#Lua error: Internal error: The interpreter exited with status 127.">CC5500</span>→ <span style="background:#CC5500; color:#Lua error: Internal error: The interpreter exited with status 127.">CC5500<span style="Lua error: Internal error: The interpreter exited with status 127.">CC5500</span>→ <span style="Lua error: Internal error: The interpreter exited with status 127.">CC5500
- CC5500,
|bias=1
<span style="background:#CC5500; color:#Lua error: Internal error: The interpreter exited with status 127.">CC5500</span>→ <span style="background:#CC5500; color:#Lua error: Internal error: The interpreter exited with status 127.">CC5500<span style="Lua error: Internal error: The interpreter exited with status 127.">CC5500</span>→ <span style="Lua error: Internal error: The interpreter exited with status 127.">CC5500
- error
<span style="background:Not a color; color:#Lua error: Internal error: The interpreter exited with status 127.">Not a color</span>→ <span style="background:Not a color; color:#Lua error: Internal error: The interpreter exited with status 127.">Not a color<span style="Lua error: Internal error: The interpreter exited with status 127.">Not a color</span>→ <span style="Lua error: Internal error: The interpreter exited with status 127.">Not a color
- (returns
background-color:Not a color; color:;, and so no color is set; defaults to black-on-white.)
- (returns
<span style="Lua error: Internal error: The interpreter exited with status 127.">Not a color</span>→ <span style="Lua error: Internal error: The interpreter exited with status 127.">Not a color
- (returns
background-color:Navy; color:;, and so no fontcolor is set; defaults to black. The template did not function.)
- (returns
See also
- {{Ensure AAA contrast ratio}}
- {{Ensure AA contrast ratio}}
- Lua error: Internal error: The interpreter exited with status 127.
- Lua error: Internal error: The interpreter exited with status 127.