This test allows you to see a spectrum of color combinations with a color of your choice. The spectrum is sorted into groups which pass or fail the color contrast tests specified in the Web Content Accessibility Guidelines (WCAG) versions 1 and 2.
Color Tested | Contrast Samples | Luminosity Ratio |
---|---|---|
#0078c8 | #000000 #0078c8 | 4.52:1 |
#0078f0 | #000000 #0078f0 | 4.94:1 |
#00a000 | #000000 #00a000 | 6.03:1 |
#00a028 | #000000 #00a028 | 6.06:1 |
#00a050 | #000000 #00a050 | 6.14:1 |
#00a078 | #000000 #00a078 | 6.3:1 |
#00a0a0 | #000000 #00a0a0 | 6.54:1 |
#00a0c8 | #000000 #00a0c8 | 6.86:1 |
#00a0f0 | #000000 #00a0f0 | 7.29:1 |
#00c800 | #000000 #00c800 | 9.26:1 |
#00c828 | #000000 #00c828 | 9.29:1 |
#00c850 | #000000 #00c850 | 9.38:1 |
#00c878 | #000000 #00c878 | 9.53:1 |
#00c8a0 | #000000 #00c8a0 | 9.77:1 |
#00c8c8 | #000000 #00c8c8 | 10.1:1 |
#00c8f0 | #000000 #00c8f0 | 10.52:1 |
#00f000 | #000000 #00f000 | 13.46:1 |
#00f028 | #000000 #00f028 | 13.49:1 |
#00f050 | #000000 #00f050 | 13.58:1 |
#00f078 | #000000 #00f078 | 13.74:1 |
#00f0a0 | #000000 #00f0a0 | 13.97:1 |
#00f0c8 | #000000 #00f0c8 | 14.3:1 |
#00f0f0 | #000000 #00f0f0 | 14.72:1 |
#2878c8 | #000000 #2878c8 | 4.61:1 |
#2878f0 | #000000 #2878f0 | 5.04:1 |
#28a000 | #000000 #28a000 | 6.12:1 |
#28a028 | #000000 #28a028 | 6.15:1 |
#28a050 | #000000 #28a050 | 6.23:1 |
#28a078 | #000000 #28a078 | 6.39:1 |
#28a0a0 | #000000 #28a0a0 | 6.63:1 |
#28a0c8 | #000000 #28a0c8 | 6.95:1 |
#28a0f0 | #000000 #28a0f0 | 7.38:1 |
#28c800 | #000000 #28c800 | 9.35:1 |
#28c828 | #000000 #28c828 | 9.38:1 |
#28c850 | #000000 #28c850 | 9.47:1 |
#28c878 | #000000 #28c878 | 9.62:1 |
#28c8a0 | #000000 #28c8a0 | 9.86:1 |
#28c8c8 | #000000 #28c8c8 | 10.19:1 |
#28c8f0 | #000000 #28c8f0 | 10.61:1 |
#28f000 | #000000 #28f000 | 13.55:1 |
#28f028 | #000000 #28f028 | 13.58:1 |
#28f050 | #000000 #28f050 | 13.67:1 |
#28f078 | #000000 #28f078 | 13.83:1 |
#28f0a0 | #000000 #28f0a0 | 14.06:1 |
#28f0c8 | #000000 #28f0c8 | 14.39:1 |
#28f0f0 | #000000 #28f0f0 | 14.81:1 |
#5078a0 | #000000 #5078a0 | 4.54:1 |
#5078c8 | #000000 #5078c8 | 4.86:1 |
#5078f0 | #000000 #5078f0 | 5.29:1 |
#50a000 | #000000 #50a000 | 6.37:1 |
#50a028 | #000000 #50a028 | 6.4:1 |
#50a050 | #000000 #50a050 | 6.49:1 |
#50a078 | #000000 #50a078 | 6.64:1 |
#50a0a0 | #000000 #50a0a0 | 6.88:1 |
#50a0c8 | #000000 #50a0c8 | 7.2:1 |
#50a0f0 | #000000 #50a0f0 | 7.63:1 |
#50c800 | #000000 #50c800 | 9.6:1 |
#50c828 | #000000 #50c828 | 9.63:1 |
#50c850 | #000000 #50c850 | 9.72:1 |
#50c878 | #000000 #50c878 | 9.87:1 |
#50c8a0 | #000000 #50c8a0 | 10.11:1 |
#50c8c8 | #000000 #50c8c8 | 10.44:1 |
#50c8f0 | #000000 #50c8f0 | 10.86:1 |
#50f000 | #000000 #50f000 | 13.81:1 |
#50f028 | #000000 #50f028 | 13.84:1 |
#50f050 | #000000 #50f050 | 13.92:1 |
#50f078 | #000000 #50f078 | 14.08:1 |
#50f0a0 | #000000 #50f0a0 | 14.31:1 |
#50f0c8 | #000000 #50f0c8 | 14.64:1 |
#50f0f0 | #000000 #50f0f0 | 15.06:1 |
#787828 | #000000 #787828 | 4.52:1 |
#787850 | #000000 #787850 | 4.6:1 |
#787878 | #000000 #787878 | 4.76:1 |
#7878a0 | #000000 #7878a0 | 4.99:1 |
#7878c8 | #000000 #7878c8 | 5.32:1 |
#7878f0 | #000000 #7878f0 | 5.74:1 |
#78a000 | #000000 #78a000 | 6.83:1 |
#78a028 | #000000 #78a028 | 6.86:1 |
#78a050 | #000000 #78a050 | 6.94:1 |
#78a078 | #000000 #78a078 | 7.1:1 |
#78a0a0 | #000000 #78a0a0 | 7.33:1 |
#78a0c8 | #000000 #78a0c8 | 7.66:1 |
#78a0f0 | #000000 #78a0f0 | 8.09:1 |
#78c800 | #000000 #78c800 | 10.06:1 |
#78c828 | #000000 #78c828 | 10.09:1 |
#78c850 | #000000 #78c850 | 10.18:1 |
#78c878 | #000000 #78c878 | 10.33:1 |
#78c8a0 | #000000 #78c8a0 | 10.57:1 |
#78c8c8 | #000000 #78c8c8 | 10.89:1 |
#78c8f0 | #000000 #78c8f0 | 11.32:1 |
#78f000 | #000000 #78f000 | 14.26:1 |
#78f028 | #000000 #78f028 | 14.29:1 |
#78f050 | #000000 #78f050 | 14.38:1 |
#78f078 | #000000 #78f078 | 14.53:1 |
#78f0a0 | #000000 #78f0a0 | 14.77:1 |
#78f0c8 | #000000 #78f0c8 | 15.1:1 |
#78f0f0 | #000000 #78f0f0 | 15.52:1 |
#a050f0 | #000000 #a050f0 | 4.9:1 |
#a07800 | #000000 #a07800 | 5.18:1 |
#a07828 | #000000 #a07828 | 5.21:1 |
#a07850 | #000000 #a07850 | 5.3:1 |
#a07878 | #000000 #a07878 | 5.45:1 |
#a078a0 | #000000 #a078a0 | 5.69:1 |
#a078c8 | #000000 #a078c8 | 6.02:1 |
#a078f0 | #000000 #a078f0 | 6.44:1 |
#a0a000 | #000000 #a0a000 | 7.52:1 |
#a0a028 | #000000 #a0a028 | 7.55:1 |
#a0a050 | #000000 #a0a050 | 7.64:1 |
#a0a078 | #000000 #a0a078 | 7.79:1 |
#a0a0a0 | #000000 #a0a0a0 | 8.03:1 |
#a0a0c8 | #000000 #a0a0c8 | 8.36:1 |
#a0a0f0 | #000000 #a0a0f0 | 8.78:1 |
#a0c800 | #000000 #a0c800 | 10.76:1 |
#a0c828 | #000000 #a0c828 | 10.79:1 |
#a0c850 | #000000 #a0c850 | 10.87:1 |
#a0c878 | #000000 #a0c878 | 11.03:1 |
#a0c8a0 | #000000 #a0c8a0 | 11.26:1 |
#a0c8c8 | #000000 #a0c8c8 | 11.59:1 |
#a0c8f0 | #000000 #a0c8f0 | 12.01:1 |
#a0f000 | #000000 #a0f000 | 14.96:1 |
#a0f028 | #000000 #a0f028 | 14.99:1 |
#a0f050 | #000000 #a0f050 | 15.07:1 |
#a0f078 | #000000 #a0f078 | 15.23:1 |
#a0f0a0 | #000000 #a0f0a0 | 15.47:1 |
#a0f0c8 | #000000 #a0f0c8 | 15.79:1 |
#a0f0f0 | #000000 #a0f0f0 | 16.22:1 |
#c800f0 | #000000 #c800f0 | 4.71:1 |
#c828c8 | #000000 #c828c8 | 4.59:1 |
#c828f0 | #000000 #c828f0 | 5.02:1 |
#c85000 | #000000 #c85000 | 4.6:1 |
#c85028 | #000000 #c85028 | 4.63:1 |
#c85050 | #000000 #c85050 | 4.72:1 |
#c85078 | #000000 #c85078 | 4.87:1 |
#c850a0 | #000000 #c850a0 | 5.11:1 |
#c850c8 | #000000 #c850c8 | 5.44:1 |
#c850f0 | #000000 #c850f0 | 5.86:1 |
#c87800 | #000000 #c87800 | 6.14:1 |
#c87828 | #000000 #c87828 | 6.17:1 |
#c87850 | #000000 #c87850 | 6.26:1 |
#c87878 | #000000 #c87878 | 6.41:1 |
#c878a0 | #000000 #c878a0 | 6.65:1 |
#c878c8 | #000000 #c878c8 | 6.98:1 |
#c878f0 | #000000 #c878f0 | 7.4:1 |
#c8a000 | #000000 #c8a000 | 8.48:1 |
#c8a028 | #000000 #c8a028 | 8.51:1 |
#c8a050 | #000000 #c8a050 | 8.6:1 |
#c8a078 | #000000 #c8a078 | 8.76:1 |
#c8a0a0 | #000000 #c8a0a0 | 8.99:1 |
#c8a0c8 | #000000 #c8a0c8 | 9.32:1 |
#c8a0f0 | #000000 #c8a0f0 | 9.74:1 |
#c8c800 | #000000 #c8c800 | 11.72:1 |
#c8c828 | #000000 #c8c828 | 11.75:1 |
#c8c850 | #000000 #c8c850 | 11.83:1 |
#c8c878 | #000000 #c8c878 | 11.99:1 |
#c8c8a0 | #000000 #c8c8a0 | 12.23:1 |
#c8c8c8 | #000000 #c8c8c8 | 12.55:1 |
#c8c8f0 | #000000 #c8c8f0 | 12.98:1 |
#c8f000 | #000000 #c8f000 | 15.92:1 |
#c8f028 | #000000 #c8f028 | 15.95:1 |
#c8f050 | #000000 #c8f050 | 16.04:1 |
#c8f078 | #000000 #c8f078 | 16.19:1 |
#c8f0a0 | #000000 #c8f0a0 | 16.43:1 |
#c8f0c8 | #000000 #c8f0c8 | 16.75:1 |
#c8f0f0 | #000000 #c8f0f0 | 17.18:1 |
#f00000 | #000000 #f00000 | 4.71:1 |
#f00028 | #000000 #f00028 | 4.74:1 |
#f00050 | #000000 #f00050 | 4.82:1 |
#f00078 | #000000 #f00078 | 4.98:1 |
#f000a0 | #000000 #f000a0 | 5.21:1 |
#f000c8 | #000000 #f000c8 | 5.54:1 |
#f000f0 | #000000 #f000f0 | 5.96:1 |
#f02800 | #000000 #f02800 | 5.01:1 |
#f02828 | #000000 #f02828 | 5.04:1 |
#f02850 | #000000 #f02850 | 5.12:1 |
#f02878 | #000000 #f02878 | 5.28:1 |
#f028a0 | #000000 #f028a0 | 5.52:1 |
#f028c8 | #000000 #f028c8 | 5.84:1 |
#f028f0 | #000000 #f028f0 | 6.27:1 |
#f05000 | #000000 #f05000 | 5.85:1 |
#f05028 | #000000 #f05028 | 5.88:1 |
#f05050 | #000000 #f05050 | 5.97:1 |
#f05078 | #000000 #f05078 | 6.12:1 |
#f050a0 | #000000 #f050a0 | 6.36:1 |
#f050c8 | #000000 #f050c8 | 6.69:1 |
#f050f0 | #000000 #f050f0 | 7.11:1 |
#f07800 | #000000 #f07800 | 7.39:1 |
#f07828 | #000000 #f07828 | 7.42:1 |
#f07850 | #000000 #f07850 | 7.51:1 |
#f07878 | #000000 #f07878 | 7.66:1 |
#f078a0 | #000000 #f078a0 | 7.9:1 |
#f078c8 | #000000 #f078c8 | 8.23:1 |
#f078f0 | #000000 #f078f0 | 8.65:1 |
#f0a000 | #000000 #f0a000 | 9.73:1 |
#f0a028 | #000000 #f0a028 | 9.76:1 |
#f0a050 | #000000 #f0a050 | 9.85:1 |
#f0a078 | #000000 #f0a078 | 10:1 |
#f0a0a0 | #000000 #f0a0a0 | 10.24:1 |
#f0a0c8 | #000000 #f0a0c8 | 10.57:1 |
#f0a0f0 | #000000 #f0a0f0 | 10.99:1 |
#f0c800 | #000000 #f0c800 | 12.97:1 |
#f0c828 | #000000 #f0c828 | 13:1 |
#f0c850 | #000000 #f0c850 | 13.08:1 |
#f0c878 | #000000 #f0c878 | 13.24:1 |
#f0c8a0 | #000000 #f0c8a0 | 13.47:1 |
#f0c8c8 | #000000 #f0c8c8 | 13.8:1 |
#f0c8f0 | #000000 #f0c8f0 | 14.23:1 |
#f0f000 | #000000 #f0f000 | 17.17:1 |
#f0f028 | #000000 #f0f028 | 17.2:1 |
#f0f050 | #000000 #f0f050 | 17.28:1 |
#f0f078 | #000000 #f0f078 | 17.44:1 |
#f0f0a0 | #000000 #f0f0a0 | 17.68:1 |
#f0f0c8 | #000000 #f0f0c8 | 18:1 |
#f0f0f0 | #000000 #f0f0f0 | 18.43:1 |
« Color Contrast Article | Two-color Comparison | Accessible Design Blog | Joe Dolson Accessible Web Design