Template:Greater color contrast ratio/doc: Difference between revisions

From Fox Labs Wiki
VisualWikitext
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|62535}} {{Lua|Module:Color contrast}} 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, [http://www.w3.org/TR/WCAG20/#visual-audio-contrast WCAG 2.0 AA guidelines..."
 
No edit summary
 
Line 1: Line 1:
{{Documentation subpage}}
{{Documentation subpage}}
<!-- Please place categories where indicated at the bottom of this page and interwikis at Wikidata (see [[Wikipedia:Wikidata]]) -->
<!-- Please place categories where indicated at the bottom of this page and interwikis at Wikidata (see [[Wikipedia:Wikidata]]) -->
{{High-use|62535}}
{{Lua|Module:Color contrast}}
{{Lua|Module:Color contrast}}


Latest revision as of 17:18, 26 October 2024

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") Template:Legend inline

|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 Template:Legend inline: {{Greater color contrast ratio|khaki|white|black}} → black
background is Template:Legend inline: {{Greater color contrast ratio|#4169E1|FFFFFF|000000}} → FFFFFF (=white)
css text
  • |css=y makes the template return css-ready text:
Template:Legend inline: {{Greater color contrast ratio|khaki|white|black|css=y}}
→ background-color:khaki; color:black;
Example 1, Template:Legend inline
<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>
→ Example text on khaki background.
Example 2, Template:Legend inline
<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>
→ 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:{{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
Red
  • <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
White
  • <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
Black
  • <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
#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|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
CC5500
  • <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
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
error
  • <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
(returns background-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 color
(returns background-color:Navy; color:;, and so no fontcolor is set; defaults to black. The template did not function.)

See also


Retrieved from "https://docs.fox-labs.io/index.php?title=Template:Greater_color_contrast_ratio/doc&oldid=331"