Randombell: Created page with "{{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 contras..."

2025-08-19T16:04:36Z

Created page with "{{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 contras..."

New page

{{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>css=y}}</code>
::→ {{mono|1={{Greater color contrast ratio|khaki|white|black|css=y}}}}

::'''Example 1''', {{legend inline|khaki |Khaki (#F0E68C)}}
::<code>font-size:110%; {{Greater color contrast ratio|khaki|white|black|css=y}}</nowiki>">Example text on khaki background.</code>
::→ <code>background-color:khaki; color:black;</nowiki>">Example text on khaki background.</code>
::→ Example text on khaki background.

::'''Example 2''', {{legend inline|#4169E1|#4169E1 (RoyalBlue)}}
::<code>font-size:110%; {{Greater color contrast ratio|#4169E1|#ffffff|#000000|css=y}}</nowiki>">Example text on #4169E1 background.</code>
::→ <code>background-color:#4169E1; color:#ffffff;</nowiki>">Example text on #4169E1 background.</code>
::→ Example text on #4169E1 background.

;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 [[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>Navy</code> → Navy
* <code>Navy</code> → Navy
* <code>Navy</code> → Navy
;Red
* <code>Red</code> → Red
* <code>Red</code> → Red
* <code>Red</code> → Red
;White
* <code>White</code> → White
* <code>White</code> → White
;Black
* <code>Black</code> → Black
* <code>Black</code> → Black
;<nowiki>#</nowiki>005500
* <code>#005500</code> → #005500
* <code>#005500</code> → #005500
* <code>005500</code> → 005500
* <code>005500</code> → 005500
;CC5500
* <code>CC5500</code> → CC5500
* <code>CC5500</code> → CC5500
;CC5500, {{para|bias|1}}
* <code>CC5500</code> → CC5500
* <code>CC5500</code> → CC5500
;error
* <code>Not a color</code> → Not a color
* <code>Not a color</code> → Not a color
::(returns <code>background-color:Not a color; color:;</code>, and so no color is set; defaults to black-on-white.)

* <code>Not a color</code> → Not a color
::(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}}
* {{section link|Template:Color contrast conformance|HTML colors}}
* {{section link|Wikipedia:Manual of Style/Accessibility|Color}}

<includeonly>{{Sandbox other||

[[Category:Color conversion templates]]

}}</includeonly>

Template:Greater color contrast ratio/doc - Revision history