What colors on a webpage work equally as well on white and black backgrounds while maintaining Web Content Accessibility Guidelines?
The following colors can be used on both black and white backgrounds. They meet the following criteria:
These were selected by calculating the contrast of every possible color and then finding the results against both black and white backgrounds that were closest to each other. The top nine colors were selected for inclusion. The color rgb(207, 13, 204) was the overall winner.
| Closest | RGB color | White contrast value | Black contrast value |
|---|---|---|---|
| rgb(3, 137, 1) | 4.582577201968528 | 4.5825741879436475 | |
| rgb(194, 83, 53) | 4.582573694982736 | 4.5825776949298165 | |
| rgb(226, 14, 123) | 4.582573911685348 | 4.5825774782270265 | |
| rgb(207, 57, 134) | 4.582574731368912 | 4.58257665854297 | |
| rgb(169, 89, 154) | 4.582577946061603 | 4.582573443851183 | |
| rgb(118, 108, 181) | 4.58257700240974 | 4.582574387502314 | |
| rgb(214, 11, 182) | 4.5825744373751665 | 4.582576952536859 | |
| ⭐ | rgb(207, 13, 204) | 4.582575574969581 | 4.5825758149421025 |
| rgb(101, 98, 242) | 4.582577110830905 | 4.5825742790812125 |
The following colors meet the criteria of:
These were selected by calculating the contrast of every possible color and then finding the results against both black and white backgrounds that were farthest from each other with at least one of them having a contrast greater than 3. The top nine colors were selected for inclusion. The color rgb(59, 85, 161) was the overall winner.
| Farthest | RGB color | White contrast value | Black contrast value |
|---|---|---|---|
| rgb(145, 66, 28) | 6.999994398649813 | 3.0000024005805725 | |
| rgb(202, 135, 34) | 3.0000003707331406 | 6.999999134956112 | |
| rgb(35, 102, 38) | 6.999996354334455 | 3.0000015624289045 | |
| rgb(164, 38, 89) | 6.99999609845202 | 3.0000016720929232 | |
| ⭐ | rgb(59, 85, 161) | 6.99999302493895 | 3.000002989314857 |
| rgb(233, 105, 161) | 3.0000001929942766 | 6.99999954968005 | |
| rgb(150, 15, 177) | 6.999998690908576 | 3.0000005610392866 | |
| rgb(117, 152, 191) | 3.0000026963185347 | 6.99999370859574 | |
| rgb(119, 141, 252) | 3.000002894123652 | 6.999993247051327 |