Difference between revisions of "Template:Greater color contrast ratio/doc"
imported>Zyxw (note module used) |
imported>Zyxw (note usage, add see also links) |
||
| 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}} | ||
| Line 29: | Line 30: | ||
== Optional parameters == | == 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. | 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 | | | <includeonly>{{#ifeq:{{SUBPAGENAME}}|sandbox | | | ||
Revision as of 00:03, 18 November 2018
| 40px | This is a documentation subpage for Template:Greater color contrast ratio. It contains usage information, categories and other content that is not part of the original template page. |
| 40px | This template is used on approximately 100,000 pages. To avoid major disruption and server load, any changes should be tested in the template's /sandbox or /testcases subpages, or in your own user subpage. The tested changes can be added to this page in a single edit. Consider discussing changes on the talk page before implementing them. Transclusion count updated automatically (see documentation). |
| 30px | This template uses Lua: |
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. 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
<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<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<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<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<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<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<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<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
Optional parameters
The bias 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. A bias of 1.25, reduces the possible minimum to 4.0, which may not meet accessibility standards.
See also
- {{Ensure AAA contrast ratio}}
- {{Ensure AA contrast ratio}}
- Script error: No such module "Section link".
- Script error: No such module "Section link".