Contrast table
Our contrast table will help designers to select beautiful and accessible color combinations based on WCAG guidelines of text and background contrast ratios.
- All colors against white
- BackgroundText color
- green-100Sample1.12Sample
- green-500Sample2.49Sample
- green-900Sample5.16Sample
- pine-500Sample13.92Sample
- cerulean-100Sample1.32Sample
- cerulean-500Sample2.48Sample
- cerulean-900Sample3.79Sample
- yellow-100Sample1.17Sample
- yellow-500Sample1.63Sample
- yellow-900Sample2.07Sample
- red-100Sample1.56Sample
- red-500Sample4.52Sample
- red-900Sample5.98Sample
- blue-500Sample5.59Sample
- persimmon-500Sample2.57Sample
- gray-50Sample1.11Sample
- gray-100Sample1.32Sample
- gray-300Sample2.06Sample
- gray-500Sample3.01Sample
- gray-700Sample4.6Sample
- gray-900Sample5.77Sample
- gray-1000Sample17.72Sample
- All colors against gray-1000
- BackgroundText color
- green-100Sample15.79Sample
- green-500Sample7.1Sample
- green-900Sample3.43Sample
- pine-500Sample1.27Sample
- cerulean-100Sample13.32Sample
- cerulean-500Sample7.14Sample
- cerulean-900Sample4.67Sample
- yellow-100Sample15.12Sample
- yellow-500Sample10.87Sample
- yellow-900Sample8.56Sample
- red-100Sample11.33Sample
- red-500Sample3.91Sample
- red-900Sample2.96Sample
- blue-500Sample3.17Sample
- persimmon-500Sample6.89Sample
- gray-50Sample15.83Sample
- gray-100Sample13.32Sample
- gray-300Sample8.59Sample
- gray-500Sample5.87Sample
- gray-700Sample3.84Sample
- gray-900Sample3.07Sample
