Template:Color contrast ratio/doc
Jump to navigation
Jump to search
Lua error: Internal error: The interpreter exited with status 127.
Lua error: Internal error: The interpreter exited with status 127.
This template returns the color contrast ratio between the two colors provided. It accepts two parameters, which can be a standard RGB hex color code (#RRGGBB) or a standard HTML color or CSS "orange" (= #FFA500). Color names and hex letters are case-insensitive (i.e. they may be upper- or lower-case).
Usage
Examples with light background
| Text Color |
Background color |
Sample | Code | Contrast ratio |
WCAG 2.0 conf. |
|---|---|---|---|---|---|
| <span style="display:inline-block;width:1em;height:1em;border:1.62px solid black;background:#000000;" title="Lua error: Internal error: The interpreter exited with status 127."> #000000 | <span style="display:inline-block;width:1em;height:1em;border:1.62px solid black;background:#FFFFFF;" title="Lua error: Internal error: The interpreter exited with status 127."> #FFFFFF | Sample | Lua error: Internal error: The interpreter exited with status 127. | Expression error: Unexpected < operator. | AAA |
| <span style="display:inline-block;width:1em;height:1em;border:1.62px solid black;background:#000080;" title="Lua error: Internal error: The interpreter exited with status 127."> #000080 | <span style="display:inline-block;width:1em;height:1em;border:1.62px solid black;background:#DDDDDD;" title="Lua error: Internal error: The interpreter exited with status 127."> #DDDDDD | Sample | Lua error: Internal error: The interpreter exited with status 127. | Expression error: Unexpected < operator. | AAA |
| <span style="display:inline-block;width:1em;height:1em;border:1.62px solid black;background:#7B0000;" title="Lua error: Internal error: The interpreter exited with status 127."> #7B0000 | <span style="display:inline-block;width:1em;height:1em;border:1.62px solid black;background:#FF9900;" title="Lua error: Internal error: The interpreter exited with status 127."> #FF9900 | Sample | Lua error: Internal error: The interpreter exited with status 127. | Expression error: Unexpected < operator. | AA |
| <span style="display:inline-block;width:1em;height:1em;border:1.62px solid black;background:#004800;" title="Lua error: Internal error: The interpreter exited with status 127."> #004800 | <span style="display:inline-block;width:1em;height:1em;border:1.62px solid black;background:#AAAAAA;" title="Lua error: Internal error: The interpreter exited with status 127."> #AAAAAA | Sample | Lua error: Internal error: The interpreter exited with status 127. | Expression error: Unexpected < operator. | AA |
| <span style="display:inline-block;width:1em;height:1em;border:1.62px solid black;background:red;" title="Lua error: Internal error: The interpreter exited with status 127."> red | <span style="display:inline-block;width:1em;height:1em;border:1.62px solid black;background:white;" title="Lua error: Internal error: The interpreter exited with status 127."> white | Sample | Lua error: Internal error: The interpreter exited with status 127. | Expression error: Unexpected < operator. | No |
| <span style="display:inline-block;width:1em;height:1em;border:1.62px solid black;background:#FF0000;" title="Lua error: Internal error: The interpreter exited with status 127."> #FF0000 | <span style="display:inline-block;width:1em;height:1em;border:1.62px solid black;background:#FF9999;" title="Lua error: Internal error: The interpreter exited with status 127."> #FF9999 | Sample | Lua error: Internal error: The interpreter exited with status 127. | Expression error: Unexpected < operator. | No |
Examples with dark background
| Text Color |
Background color |
Sample | Code | Contrast ratio |
WCAG 2.0 conf. |
|---|---|---|---|---|---|
| <span style="display:inline-block;width:1em;height:1em;border:1.62px solid black;background:#BADFEE;" title="Lua error: Internal error: The interpreter exited with status 127."> #BADFEE | <span style="display:inline-block;width:1em;height:1em;border:1.62px solid black;background:black;" title="Lua error: Internal error: The interpreter exited with status 127."> black | Sample | Lua error: Internal error: The interpreter exited with status 127. | Expression error: Unexpected < operator. | AAA |
| <span style="display:inline-block;width:1em;height:1em;border:1.62px solid black;background:red;" title="Lua error: Internal error: The interpreter exited with status 127."> red | <span style="display:inline-block;width:1em;height:1em;border:1.62px solid black;background:black;" title="Lua error: Internal error: The interpreter exited with status 127."> black | Sample | Lua error: Internal error: The interpreter exited with status 127. | Expression error: Unexpected < operator. | AA |
| <span style="display:inline-block;width:1em;height:1em;border:1.62px solid black;background:#FFFF00;" title="Lua error: Internal error: The interpreter exited with status 127."> #FFFF00 | <span style="display:inline-block;width:1em;height:1em;border:1.62px solid black;background:#00FFFF;" title="Lua error: Internal error: The interpreter exited with status 127."> #00FFFF | Sample | Lua error: Internal error: The interpreter exited with status 127. | Expression error: Unexpected < operator. | No |
WCAG 2.0
As a guide to selecting foreground and background colors for text, the Web Content Accessibility Guidelines 2.0 (guideline 1.4) classifies contrast ratios for ordinary text as follows:
| Font size | Not Compliant | Level AA | Level AAA |
|---|---|---|---|
| Normal | < 4.5 | 4.5 to 7.0 | > 7.0 |
| Large (18 pt or 14 pt bold) | < 3.0 | 3.0 to 4.5 | > 4.5 |
Normal wiki-text is rendered by common browsers at roughly 9.5 to 10.5 pt (12.5 to 14 px), depending on skin. Text would need to be about 180% or 140% bold to qualify as "Large" for WCAG purposes.