Paleta accesible

Genera paletas de color compatibles con WCAG

WCAG 2.1 Contrast Matrix

11 Tones (50-950)

Primary Seed Color Configuration

Hex Code:

Accessible Shade Matrix & Contrast Verification

#e7f8f2

On White: 1.1:1Fail

On Black: 19.11:1AAA

100

#cff1e6

On White: 1.21:1Fail

On Black: 17.38:1AAA

200

#9fe3cd

On White: 1.46:1Fail

On Black: 14.34:1AAA

300

#70d5b3

On White: 1.77:1Fail

On Black: 11.86:1AAA

400

#40c79a

On White: 2.13:1Fail

On Black: 9.85:1AAA

500

#10b981

On White: 2.54:1Fail

On Black: 8.28:1AAA

600

#0d9467

On White: 3.85:1AA Large

On Black: 5.45:1AA

700

#0a6f4d

On White: 6.19:1AA

On Black: 3.39:1AA Large

800

#064a34

On White: 10.31:1AAA

On Black: 2.04:1Fail

900

#03251a

On White: 16.36:1AAA

On Black: 1.28:1Fail

950

#02120d

On White: 19.18:1AAA

On Black: 1.09:1Fail

Root CSS Custom Properties

:root {
  --color-brand-50: #e7f8f2;
  --color-brand-100: #cff1e6;
  --color-brand-200: #9fe3cd;
  --color-brand-300: #70d5b3;
  --color-brand-400: #40c79a;
  --color-brand-500: #10b981;
  --color-brand-600: #0d9467;
  --color-brand-700: #0a6f4d;
  --color-brand-800: #064a34;
  --color-brand-900: #03251a;
  --color-brand-950: #02120d;
}

Tailwind CSS Config Extension

theme: {
  extend: {
    colors: {
      brand: {
        50: '#e7f8f2',
        100: '#cff1e6',
        200: '#9fe3cd',
        300: '#70d5b3',
        400: '#40c79a',
        500: '#10b981',
        600: '#0d9467',
        700: '#0a6f4d',
        800: '#064a34',
        900: '#03251a',
        950: '#02120d',
      }
    }
  }
}