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