Template:Greater color contrast ratio/doc

{{Greater color contrast ratio}} determines which of two colors has more contrast relative to a given color. This is useful for selecting a foreground/background color pair. By default, the two candidate colors are white and black, and the selected color pair will always have a contrast ratio greater than 4.58. WCAG 2.2 AA guidelines require a contrast ratio of at least 3 for large text and at least 4.5 for normal sized text. Colors can be specified by name (e.g., royalblue) or as hex triplets, with or without the # prefix (e.g., #4169e1, 4169e1).

• {{Greater color contrast ratio|royalblue}} →

  #FFFFFF

• {{Greater color contrast ratio|#4169e1}} →

  #FFFFFF

• {{Greater color contrast ratio|4169e1}} →

  #FFFFFF

• {{Greater color contrast ratio|royalblue|#000000|#ffffff}} →

  #ffffff

• {{Greater color contrast ratio|royalblue|#00ffff|#ffff00}} →

  #ffff00

• {{Greater color contrast ratio|royalblue|black|white}} →

  white

• {{Greater color contrast ratio|royalblue|cyan|yellow}} →

  yellow

If |css=y is set, the template will return valid CSS.

• {{Greater color contrast ratio|royalblue|css=yes}} →

  background-color:royalblue; color:#FFFFFF;

• <span style="{{greater color contrast ratio|royalblue|css=yes}}">Text with a royalblue background</span> →

  Text with a royalblue background

• <span style="{{greater color contrast ratio|royalblue|cyan|yellow|css=yes}}">Text with a royalblue background</span> →

  Text with a royalblue background

|bias=number specifies a tolerance by which the first color may have a lower contrast ratio than the second and still be selected.

• {{Greater color contrast ratio|royalblue|black|white|bias=0.5}} →

  white

• {{Greater color contrast ratio|royalblue|black|white|bias=0.6}} →

  black

• {{Greater color contrast ratio|royalblue|cyan|yellow|bias=0.6}} →

  yellow

• {{Greater color contrast ratio|royalblue|cyan|yellow|bias=0.7}} →

  cyan

TemplateData

This template determines which of two colors has the higher contrast relative to a given color.

Template parameters

This template prefers inline formatting of parameters.

Parameter		Description	Type	Status
Base color	1	The reference color against which contrast is measured (typically the background color) Example royalblue	String	required
First option	2	The first candidate color to compare for contrast against the base color. Default #000000 Example cyan	String	optional
Second option	3	The second candidate color to compare for contrast against the base color. Default #ffffff Example yellow	String	optional
CSS	css	If set to anything, returns valid CSS in the form of "color: …; background-color: …;" instead of a raw color value	Boolean	optional
Bias	bias	A numeric tolerance that favors the first option. The first color may have a contrast ratio up to bias less than the second color and still be selected. Default 0 Example 0.6	Number	optional