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 |
---|---|---|
#000000 | #FFFFFF #000000 | 21:1 |
#000028 | #FFFFFF #000028 | 20.38:1 |
#000050 | #FFFFFF #000050 | 18.82:1 |
#000078 | #FFFFFF #000078 | 16.52:1 |
#0000a0 | #FFFFFF #0000a0 | 13.93:1 |
#0000c8 | #FFFFFF #0000c8 | 11.45:1 |
#0000f0 | #FFFFFF #0000f0 | 9.3:1 |
#002800 | #FFFFFF #002800 | 16.11:1 |
#002828 | #FFFFFF #002828 | 15.74:1 |
#002850 | #FFFFFF #002850 | 14.8:1 |
#002878 | #FFFFFF #002878 | 13.34:1 |
#0028a0 | #FFFFFF #0028a0 | 11.59:1 |
#0028c8 | #FFFFFF #0028c8 | 9.82:1 |
#0028f0 | #FFFFFF #0028f0 | 8.2:1 |
#005000 | #FFFFFF #005000 | 9.78:1 |
#005028 | #FFFFFF #005028 | 9.64:1 |
#005050 | #FFFFFF #005050 | 9.28:1 |
#005078 | #FFFFFF #005078 | 8.68:1 |
#0050a0 | #FFFFFF #0050a0 | 7.91:1 |
#0050c8 | #FFFFFF #0050c8 | 7.04:1 |
#0050f0 | #FFFFFF #0050f0 | 6.17:1 |
#007800 | #FFFFFF #007800 | 5.7:1 |
#007828 | #FFFFFF #007828 | 5.65:1 |
#007850 | #FFFFFF #007850 | 5.52:1 |
#007878 | #FFFFFF #007878 | 5.31:1 |
#0078a0 | #FFFFFF #0078a0 | 5.01:1 |
#0078c8 | #FFFFFF #0078c8 | 4.65:1 |
#280000 | #FFFFFF #280000 | 19.26:1 |
#280028 | #FFFFFF #280028 | 18.74:1 |
#280050 | #FFFFFF #280050 | 17.41:1 |
#280078 | #FFFFFF #280078 | 15.42:1 |
#2800a0 | #FFFFFF #2800a0 | 13.14:1 |
#2800c8 | #FFFFFF #2800c8 | 10.91:1 |
#2800f0 | #FFFFFF #2800f0 | 8.94:1 |
#282800 | #FFFFFF #282800 | 15.07:1 |
#282828 | #FFFFFF #282828 | 14.74:1 |
#282850 | #FFFFFF #282850 | 13.91:1 |
#282878 | #FFFFFF #282878 | 12.61:1 |
#2828a0 | #FFFFFF #2828a0 | 11.04:1 |
#2828c8 | #FFFFFF #2828c8 | 9.43:1 |
#2828f0 | #FFFFFF #2828f0 | 7.92:1 |
#285000 | #FFFFFF #285000 | 9.38:1 |
#285028 | #FFFFFF #285028 | 9.26:1 |
#285050 | #FFFFFF #285050 | 8.92:1 |
#285078 | #FFFFFF #285078 | 8.37:1 |
#2850a0 | #FFFFFF #2850a0 | 7.65:1 |
#2850c8 | #FFFFFF #2850c8 | 6.84:1 |
#2850f0 | #FFFFFF #2850f0 | 6.01:1 |
#287800 | #FFFFFF #287800 | 5.56:1 |
#287828 | #FFFFFF #287828 | 5.52:1 |
#287850 | #FFFFFF #287850 | 5.39:1 |
#287878 | #FFFFFF #287878 | 5.19:1 |
#2878a0 | #FFFFFF #2878a0 | 4.9:1 |
#2878c8 | #FFFFFF #2878c8 | 4.55:1 |
#500000 | #FFFFFF #500000 | 15.66:1 |
#500028 | #FFFFFF #500028 | 15.31:1 |
#500050 | #FFFFFF #500050 | 14.41:1 |
#500078 | #FFFFFF #500078 | 13.02:1 |
#5000a0 | #FFFFFF #5000a0 | 11.36:1 |
#5000c8 | #FFFFFF #5000c8 | 9.65:1 |
#5000f0 | #FFFFFF #5000f0 | 8.08:1 |
#502800 | #FFFFFF #502800 | 12.77:1 |
#502828 | #FFFFFF #502828 | 12.54:1 |
#502850 | #FFFFFF #502850 | 11.93:1 |
#502878 | #FFFFFF #502878 | 10.96:1 |
#5028a0 | #FFFFFF #5028a0 | 9.76:1 |
#5028c8 | #FFFFFF #5028c8 | 8.47:1 |
#5028f0 | #FFFFFF #5028f0 | 7.23:1 |
#505000 | #FFFFFF #505000 | 8.44:1 |
#505028 | #FFFFFF #505028 | 8.34:1 |
#505050 | #FFFFFF #505050 | 8.06:1 |
#505078 | #FFFFFF #505078 | 7.61:1 |
#5050a0 | #FFFFFF #5050a0 | 7.01:1 |
#5050c8 | #FFFFFF #5050c8 | 6.32:1 |
#5050f0 | #FFFFFF #5050f0 | 5.6:1 |
#507800 | #FFFFFF #507800 | 5.21:1 |
#507828 | #FFFFFF #507828 | 5.17:1 |
#507850 | #FFFFFF #507850 | 5.07:1 |
#507878 | #FFFFFF #507878 | 4.88:1 |
#5078a0 | #FFFFFF #5078a0 | 4.63:1 |
#780000 | #FFFFFF #780000 | 11.68:1 |
#780028 | #FFFFFF #780028 | 11.48:1 |
#780050 | #FFFFFF #780050 | 10.97:1 |
#780078 | #FFFFFF #780078 | 10.15:1 |
#7800a0 | #FFFFFF #7800a0 | 9.11:1 |
#7800c8 | #FFFFFF #7800c8 | 7.98:1 |
#7800f0 | #FFFFFF #7800f0 | 6.87:1 |
#782800 | #FFFFFF #782800 | 9.99:1 |
#782828 | #FFFFFF #782828 | 9.85:1 |
#782850 | #FFFFFF #782850 | 9.47:1 |
#782878 | #FFFFFF #782878 | 8.85:1 |
#7828a0 | #FFFFFF #7828a0 | 8.05:1 |
#7828c8 | #FFFFFF #7828c8 | 7.15:1 |
#7828f0 | #FFFFFF #7828f0 | 6.25:1 |
#785000 | #FFFFFF #785000 | 7.13:1 |
#785028 | #FFFFFF #785028 | 7.05:1 |
#785050 | #FFFFFF #785050 | 6.86:1 |
#785078 | #FFFFFF #785078 | 6.53:1 |
#7850a0 | #FFFFFF #7850a0 | 6.08:1 |
#7850c8 | #FFFFFF #7850c8 | 5.56:1 |
#7850f0 | #FFFFFF #7850f0 | 4.99:1 |
#787800 | #FFFFFF #787800 | 4.68:1 |
#787828 | #FFFFFF #787828 | 4.65:1 |
#787850 | #FFFFFF #787850 | 4.56:1 |
#a00000 | #FFFFFF #a00000 | 8.42:1 |
#a00028 | #FFFFFF #a00028 | 8.32:1 |
#a00050 | #FFFFFF #a00050 | 8.04:1 |
#a00078 | #FFFFFF #a00078 | 7.59:1 |
#a000a0 | #FFFFFF #a000a0 | 6.99:1 |
#a000c8 | #FFFFFF #a000c8 | 6.31:1 |
#a000f0 | #FFFFFF #a000f0 | 5.6:1 |
#a02800 | #FFFFFF #a02800 | 7.5:1 |
#a02828 | #FFFFFF #a02828 | 7.42:1 |
#a02850 | #FFFFFF #a02850 | 7.21:1 |
#a02878 | #FFFFFF #a02878 | 6.84:1 |
#a028a0 | #FFFFFF #a028a0 | 6.35:1 |
#a028c8 | #FFFFFF #a028c8 | 5.78:1 |
#a028f0 | #FFFFFF #a028f0 | 5.18:1 |
#a05000 | #FFFFFF #a05000 | 5.77:1 |
#a05028 | #FFFFFF #a05028 | 5.72:1 |
#a05050 | #FFFFFF #a05050 | 5.59:1 |
#a05078 | #FFFFFF #a05078 | 5.37:1 |
#a050a0 | #FFFFFF #a050a0 | 5.06:1 |
#a050c8 | #FFFFFF #a050c8 | 4.69:1 |
#c80000 | #FFFFFF #c80000 | 6.08:1 |
#c80028 | #FFFFFF #c80028 | 6.02:1 |
#c80050 | #FFFFFF #c80050 | 5.88:1 |
#c80078 | #FFFFFF #c80078 | 5.63:1 |
#c800a0 | #FFFFFF #c800a0 | 5.3:1 |
#c800c8 | #FFFFFF #c800c8 | 4.9:1 |
#c82800 | #FFFFFF #c82800 | 5.59:1 |
#c82828 | #FFFFFF #c82828 | 5.54:1 |
#c82850 | #FFFFFF #c82850 | 5.42:1 |
#c82878 | #FFFFFF #c82878 | 5.21:1 |
#c828a0 | #FFFFFF #c828a0 | 4.92:1 |
#c828c8 | #FFFFFF #c828c8 | 4.57:1 |
#c85000 | #FFFFFF #c85000 | 4.56:1 |
#c85028 | #FFFFFF #c85028 | 4.53:1 |
« Color Contrast Article | Two-color Comparison | Accessible Design Blog | Joe Dolson Accessible Web Design