Jump to content

Module:Color contrast/doc: Difference between revisions

From Wikipedia, the free encyclopedia
Content deleted Content added
Usage: template name fix
 
Line 23: Line 23:
To use this module, you may use one of the above listed templates or invoke the module directly
To use this module, you may use one of the above listed templates or invoke the module directly


* To compute relative luminescence: <br> <code><nowiki>{{ColorToLum|color}}</nowiki></code> or <code><nowiki>{{#invoke:Color contrast|lum|color}}</nowiki></code>
* To compute relative luminescence: <br> <syntaxhighlight lang="wikitext" inline>{{RGBColorToLum|color}}</syntaxhighlight> or <syntaxhighlight lang="wikitext" inline>{{#invoke:Color contrast|lum|color}}</syntaxhighlight>
* To compute a contrast ratio between two colors: <br> <code><nowiki>{{Color contrast ratio|color1|color2|error=?}}</nowiki></code> or <code><nowiki>{{#invoke:Color contrast|ratio|color1|color2|error=?}}</nowiki></code>
* To compute a contrast ratio between two colors: <br> <syntaxhighlight lang="wikitext" inline>{{Color contrast ratio|color1|color2|error=?}}</syntaxhighlight> or <syntaxhighlight lang="wikitext" inline>{{#invoke:Color contrast|ratio|color1|color2|error=?}}</syntaxhighlight>
* To determine which of two colors (color2a and color2b) has the greater contrast ratio with a particular color (color1): <br> <code><nowiki>{{Greater color contrast ratio|color1|color2a|color2b}}</nowiki></code> or <code><nowiki>{{#invoke:Color contrast|greatercontrast|color1|color2a|color2b}}</nowiki></code>
* To determine which of two colors (color2a and color2b) has the greater contrast ratio with a particular color (color1): <br> <syntaxhighlight lang="wikitext" inline>{{Greater color contrast ratio|color1|color2a|color2b}}</syntaxhighlight> or <syntaxhighlight lang="wikitext" inline>{{#invoke:Color contrast|greatercontrast|color1|color2a|color2b}}</syntaxhighlight>
* To compute the contrast ratio between the background and text colors specified in a css style string: <br> <code><nowiki>{{#invoke:Color contrast|styleratio|css style statement string|default background color|default text color}}</nowiki></code>
* To compute the contrast ratio between the background and text colors specified in a css style string: <br> <syntaxhighlight lang="wikitext" inline>{{#invoke:Color contrast|styleratio|css style statement string|default background color|default text color}}</syntaxhighlight>


<includeonly>{{sandbox other||
<includeonly>{{sandbox other||

Latest revision as of 00:25, 18 February 2025


This module is used primarily by

It is also used for tracking within

and for documentation in

The formulas used are stated in WCAG 2.x specifications. WCAG is the main guideline for creating accessible interfaces on the web.

Usage

[edit]

To use this module, you may use one of the above listed templates or invoke the module directly

  • To compute relative luminescence:
    {{RGBColorToLum|color}} or {{#invoke:Color contrast|lum|color}}
  • To compute a contrast ratio between two colors:
    {{Color contrast ratio|color1|color2|error=?}} or {{#invoke:Color contrast|ratio|color1|color2|error=?}}
  • To determine which of two colors (color2a and color2b) has the greater contrast ratio with a particular color (color1):
    {{Greater color contrast ratio|color1|color2a|color2b}} or {{#invoke:Color contrast|greatercontrast|color1|color2a|color2b}}
  • To compute the contrast ratio between the background and text colors specified in a css style string:
    {{#invoke:Color contrast|styleratio|css style statement string|default background color|default text color}}