Jump to content
Main menu
Main menu
move to sidebar
hide
Navigation
Main page
Recent changes
Random page
Help about MediaWiki
Help
Community portal
Steward requests
test1-
Search
Search
Appearance
Create account
Log in
Personal tools
Create account
Log in
Pages for logged out editors
learn more
Contributions
Talk
Editing
Template:Greater color contrast ratio/doc
Template
Discussion
English
Read
Edit
View history
Tools
Tools
move to sidebar
hide
Actions
Read
Edit
View history
General
What links here
Related changes
Special pages
Page information
Get shortened URL
Appearance
move to sidebar
hide
Warning:
You are not logged in. Your IP address will be publicly visible if you make any edits. If you
log in
or
create an account
, your edits will be attributed to your username, along with other benefits.
Anti-spam check. Do
not
fill this in!
{{Documentation subpage}} {{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. 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") {{legend inline|#F0E68C}} :{{para|1}} (required): background color :{{para|2}} first fontcolor. Optional, default = white (#FFFFFF) :{{para|3}} second fontcolor. Optional, default = black (#000000) ;The template returns the fontcolor with the greatest contrast: :background is {{legend inline|khaki |Khaki (#F0E68C)}}: <nowiki>{{Greater color contrast ratio|khaki|white|black}}</nowiki> → {{Greater color contrast ratio|khaki|white|black}} :background is {{legend inline|#4169E1|RoyalBlue (#4169E1)}}: <nowiki>{{Greater color contrast ratio|#4169E1|FFFFFF|000000}}</nowiki> → {{Greater color contrast ratio|#4169E1|FFFFFF|000000}} ''(=white)'' ;css text * {{para|css|y}} makes the template return css-ready text: ::{{legend inline|khaki |Khaki (#F0E68C)}}: <code><nowiki>{{Greater color contrast ratio|khaki|white|black|</nowiki><span style="background:yellow">css=y</span>}}</code> ::→ <span style="background:yellow">{{mono|1={{Greater color contrast ratio|khaki|white|black|css=y}}}}</span> ::'''Example 1''', {{legend inline|khaki |Khaki (#F0E68C)}} ::<code><span style="<nowiki>font-size:110%; {{Greater color contrast ratio|khaki|white|black|css=y}}</nowiki>">Example text on khaki background.</span></code> ::→ <code><span style="font-size:110%; <nowiki>background-color:khaki; color:black;</nowiki>">Example text on khaki background.</span></code> ::→ <span style="font-size:110%; {{Greater color contrast ratio|khaki|white|black|css=y}}">Example text on khaki background.</span> ::'''Example 2''', {{legend inline|#4169E1|#4169E1 (RoyalBlue)}} ::<code><span style="<nowiki>font-size:110%; {{Greater color contrast ratio|#4169E1|#ffffff|#000000|css=y}}</nowiki>">Example text on #4169E1 background.</span></code> ::→ <code><span style="font-size:110%; <nowiki>background-color:#4169E1; color:#ffffff;</nowiki>">Example text on #4169E1 background.</span></code> ::→ <span style="font-size:110%; {{Greater color contrast ratio|#4169E1|#ffffff|#000000|css=y}}">Example text on #4169E1 background.</span> ;bias * {{para|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 [[w: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. == Examples == ;Navy * <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> ;Red * <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> ;White * <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> ;Black * <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> ;<nowiki>#</nowiki>005500 * <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> ;CC5500 * <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> ;CC5500, {{para|bias|1}} * <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> ;error * <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> ::(returns <code>background-color:Not a color; color:;</code>, and so no color is set; defaults to black-on-white.) * <code><span style="{{tlf|Greater color contrast ratio|Navy|Not a color|000000|css{{=}}y}}">Not a color</span></code> → <span style="{{Greater color contrast ratio|Navy|Not a color|000000|css=y}}">Not a color</span> ::(returns <code>background-color:Navy; color:;</code>, and so no ''fontcolor'' is set; defaults to black. The template did not function.) == See also == * {{tl|Ensure AAA contrast ratio}} * {{tl|Ensure AA contrast ratio}} <includeonly>[[Category:Color conversion templates]]</includeonly>
Summary:
Please note that all contributions to test1- may be edited, altered, or removed by other contributors. If you do not want your writing to be edited mercilessly, then do not submit it here.
You are also promising us that you wrote this yourself, or copied it from a public domain or similar free resource (see
test1-:Copyrights
for details).
Do not submit copyrighted work without permission!
Cancel
Editing help
(opens in new window)
Templates used on this page:
Template:Documentation subpage
(
edit
)
Template:Greater color contrast ratio
(
edit
)
Template:Ifsubst
(
edit
)
Template:Legend inline
(
edit
)
Template:Lua
(
edit
)
Template:Mbox
(
edit
)
Template:Mono
(
edit
)
Template:Para
(
edit
)
Template:Tl
(
edit
)
Template:Tlf
(
edit
)
Module:Arguments
(
edit
)
Module:Color contrast
(
edit
)
Module:Color contrast/colors
(
edit
)
Module:List
(
edit
)
Module:Lua banner
(
edit
)
Module:Message box
(
edit
)
Module:Message box/configuration
(
edit
)
Module:No globals
(
edit
)
Module:TNT
(
edit
)
Module:TableTools
(
edit
)
Module:Yesno
(
edit
)