Changes
Jump to navigation
Jump to search
Template:Greater color contrast ratio/doc (view source)
Revision as of 01:03, 18 November 2018
, 5 years agonote usage, add see also links
{{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] 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 ==
* <code><span style="background:navy; color:{{tlf|Greater color contrast ratio|navy|white|black}}">Navy</span></code> → <span style="background:navy; color:{{Greater color contrast ratio|navy|white|black}}">Navy</span>
* <code><span style="{{tlf|Greater color contrast ratio|navy|white|black|css{{=}}y}}">Navy</span></code> → <span style="{{Greater color contrast ratio|navy|white|black|css=y}}">Navy</span>
* <code><span style="{{tlf|Greater color contrast ratio|navy|css{{=}}y}}">Navy</span></code> → <span style="{{Greater color contrast ratio|navy|css=y}}">Navy</span>
* <code><span style="background:red; color:{{tlf|Greater color contrast ratio|red|white|black}}">Red</span></code> → <span style="background:red; color:{{Greater color contrast ratio|red|white|black}}">Red</span>
* <code><span style="{{tlf|Greater color contrast ratio|red|white|black|css{{=}}y}}">Red</span></code> → <span style="{{Greater color contrast ratio|red|white|black|css=y}}">Red</span>
* <code><span style="{{tlf|Greater color contrast ratio|red|css{{=}}y}}">Red</span></code> → <span style="{{Greater color contrast ratio|red|css=y}}">Red</span>
* <code><span style="background:white; color:{{tlf|Greater color contrast ratio|white|white|black}}">White</span></code> → <span style="background:white; color:{{Greater color contrast ratio|white|white|black}}">White</span>
* <code><span style="{{tlf|Greater color contrast ratio|white|white|black|css{{=}}y}}">White</span></code> → <span style="{{Greater color contrast ratio|white|white|black|css=y}}">White</span>
* <code><span style="background:black; color:{{tlf|Greater color contrast ratio|black|white|black}}">Black</span></code> → <span style="background:black; color:{{Greater color contrast ratio|black|white|black}}">Black</span>
* <code><span style="{{tlf|Greater color contrast ratio|black|white|black|css{{=}}y}}">Black</span></code> → <span style="{{Greater color contrast ratio|black|white|black|css=y}}">Black</span>
* <code><span style="background:#005500; color:{{tlf|Greater color contrast ratio|#005500|#FFFFFF|#000000}}">#005500</span></code> → <span style="background:#005500; color:{{Greater color contrast ratio|#005500|#FFFFFF|#000000}}">#005500</span>
* <code><span style="{{tlf|Greater color contrast ratio|#005500|#FFFFFF|#000000|css{{=}}y}}">#005500</span></code> → <span style="{{Greater color contrast ratio|#005500|#FFFFFF|#000000|css=y}}">#005500</span>
* <code><span style="background:#005500; color:#{{tlf|Greater color contrast ratio|005500|FFFFFF|000000}}">005500</span></code> → <span style="background:#005500; color:#{{Greater color contrast ratio|005500|FFFFFF|000000}}">005500</span>
* <code><span style="{{tlf|Greater color contrast ratio|005500|FFFFFF|000000|css={{y}}}}">005500</span></code> → <span style="{{Greater color contrast ratio|005500|FFFFFF|000000|css=y}}">005500</span>
* <code><span style="background:#CC5500; color:#{{tlf|Greater color contrast ratio|CC5500|FFFFFF|000000}}">CC5500</span></code> → <span style="background:#CC5500; color:#{{Greater color contrast ratio|CC5500|FFFFFF|000000}}">CC5500</span>
* <code><span style="{{tlf|Greater color contrast ratio|CC5500|FFFFFF|000000|css{{=}}y}}">CC5500</span></code> → <span style="{{Greater color contrast ratio|CC5500|FFFFFF|000000|css=y}}">CC5500</span>
* <code><span style="background:#CC5500; color:#{{tlf|Greater color contrast ratio|CC5500|FFFFFF|000000|bias{{=}}1}}">CC5500</span></code> → <span style="background:#CC5500; color:#{{Greater color contrast ratio|CC5500|FFFFFF|000000|bias=1}}">CC5500</span>
* <code><span style="{{tlf|Greater color contrast ratio|CC5500|FFFFFF|000000|bias{{=}}1|css{{=}}y}}">CC5500</span></code> → <span style="{{Greater color contrast ratio|CC5500|FFFFFF|000000|bias=1|css=y}}">CC5500</span>
* <code><span style="background:Not a color; color:#{{tlf|Greater color contrast ratio|Not a color|FFFFFF|000000}}">Not a color</span></code> → <span style="background:Not a color; color:#{{Greater color contrast ratio|Not a color|FFFFFF|000000}}">Not a color</span>
* <code><span style="{{tlf|Greater color contrast ratio|Not a color|FFFFFF|000000|css{{=}}y}}">Not a color</span></code> → <span style="{{Greater color contrast ratio|Not a color|FFFFFF|000000|css=y}}">Not a color</span>
== Optional parameters ==
The <code>bias</code> parameter should be used with caution to ensure [[wp:accessibility|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 ==
* {{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>{{#ifeq:{{SUBPAGENAME}}|sandbox | |
<!-- Categories below this line, please; interwikis at Wikidata -->
[[Category:Color conversion templates]]
}}</includeonly>
<!-- 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] 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 ==
* <code><span style="background:navy; color:{{tlf|Greater color contrast ratio|navy|white|black}}">Navy</span></code> → <span style="background:navy; color:{{Greater color contrast ratio|navy|white|black}}">Navy</span>
* <code><span style="{{tlf|Greater color contrast ratio|navy|white|black|css{{=}}y}}">Navy</span></code> → <span style="{{Greater color contrast ratio|navy|white|black|css=y}}">Navy</span>
* <code><span style="{{tlf|Greater color contrast ratio|navy|css{{=}}y}}">Navy</span></code> → <span style="{{Greater color contrast ratio|navy|css=y}}">Navy</span>
* <code><span style="background:red; color:{{tlf|Greater color contrast ratio|red|white|black}}">Red</span></code> → <span style="background:red; color:{{Greater color contrast ratio|red|white|black}}">Red</span>
* <code><span style="{{tlf|Greater color contrast ratio|red|white|black|css{{=}}y}}">Red</span></code> → <span style="{{Greater color contrast ratio|red|white|black|css=y}}">Red</span>
* <code><span style="{{tlf|Greater color contrast ratio|red|css{{=}}y}}">Red</span></code> → <span style="{{Greater color contrast ratio|red|css=y}}">Red</span>
* <code><span style="background:white; color:{{tlf|Greater color contrast ratio|white|white|black}}">White</span></code> → <span style="background:white; color:{{Greater color contrast ratio|white|white|black}}">White</span>
* <code><span style="{{tlf|Greater color contrast ratio|white|white|black|css{{=}}y}}">White</span></code> → <span style="{{Greater color contrast ratio|white|white|black|css=y}}">White</span>
* <code><span style="background:black; color:{{tlf|Greater color contrast ratio|black|white|black}}">Black</span></code> → <span style="background:black; color:{{Greater color contrast ratio|black|white|black}}">Black</span>
* <code><span style="{{tlf|Greater color contrast ratio|black|white|black|css{{=}}y}}">Black</span></code> → <span style="{{Greater color contrast ratio|black|white|black|css=y}}">Black</span>
* <code><span style="background:#005500; color:{{tlf|Greater color contrast ratio|#005500|#FFFFFF|#000000}}">#005500</span></code> → <span style="background:#005500; color:{{Greater color contrast ratio|#005500|#FFFFFF|#000000}}">#005500</span>
* <code><span style="{{tlf|Greater color contrast ratio|#005500|#FFFFFF|#000000|css{{=}}y}}">#005500</span></code> → <span style="{{Greater color contrast ratio|#005500|#FFFFFF|#000000|css=y}}">#005500</span>
* <code><span style="background:#005500; color:#{{tlf|Greater color contrast ratio|005500|FFFFFF|000000}}">005500</span></code> → <span style="background:#005500; color:#{{Greater color contrast ratio|005500|FFFFFF|000000}}">005500</span>
* <code><span style="{{tlf|Greater color contrast ratio|005500|FFFFFF|000000|css={{y}}}}">005500</span></code> → <span style="{{Greater color contrast ratio|005500|FFFFFF|000000|css=y}}">005500</span>
* <code><span style="background:#CC5500; color:#{{tlf|Greater color contrast ratio|CC5500|FFFFFF|000000}}">CC5500</span></code> → <span style="background:#CC5500; color:#{{Greater color contrast ratio|CC5500|FFFFFF|000000}}">CC5500</span>
* <code><span style="{{tlf|Greater color contrast ratio|CC5500|FFFFFF|000000|css{{=}}y}}">CC5500</span></code> → <span style="{{Greater color contrast ratio|CC5500|FFFFFF|000000|css=y}}">CC5500</span>
* <code><span style="background:#CC5500; color:#{{tlf|Greater color contrast ratio|CC5500|FFFFFF|000000|bias{{=}}1}}">CC5500</span></code> → <span style="background:#CC5500; color:#{{Greater color contrast ratio|CC5500|FFFFFF|000000|bias=1}}">CC5500</span>
* <code><span style="{{tlf|Greater color contrast ratio|CC5500|FFFFFF|000000|bias{{=}}1|css{{=}}y}}">CC5500</span></code> → <span style="{{Greater color contrast ratio|CC5500|FFFFFF|000000|bias=1|css=y}}">CC5500</span>
* <code><span style="background:Not a color; color:#{{tlf|Greater color contrast ratio|Not a color|FFFFFF|000000}}">Not a color</span></code> → <span style="background:Not a color; color:#{{Greater color contrast ratio|Not a color|FFFFFF|000000}}">Not a color</span>
* <code><span style="{{tlf|Greater color contrast ratio|Not a color|FFFFFF|000000|css{{=}}y}}">Not a color</span></code> → <span style="{{Greater color contrast ratio|Not a color|FFFFFF|000000|css=y}}">Not a color</span>
== Optional parameters ==
The <code>bias</code> parameter should be used with caution to ensure [[wp:accessibility|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 ==
* {{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>{{#ifeq:{{SUBPAGENAME}}|sandbox | |
<!-- Categories below this line, please; interwikis at Wikidata -->
[[Category:Color conversion templates]]
}}</includeonly>
