Curated palette · Status

Status colors Four states, both themes

Success, warning, error and information, in the light and dark themes this site ships. Every place the colors carry words is measured for contrast, and every two states for how far apart they stay for color-blind readers.

States
4
Themes
2
Uses measured
40
Weakest text pair
5.29:1
Closest two by color alone
ΔE 0.36
Contrast Color vision

The tokens

The four states

Each state has a job, an icon and a word, and a color and a background in each theme. Copy any value; the site token it comes from is under it.

  • Success

    Something finished as asked. Its word: Success.

    Light theme

    Color
    --aa2-ok
    Background
    --aa2-ok-bg

    Dark theme

    Color
    --aa2-ok
    Background
    --aa2-ok-bg

  • Warning

    Something needs attention, but nothing is lost yet. Its word: Warning.

    Light theme

    Color
    --aa2-warn
    Background
    --aa2-warn-bg

    Dark theme

    Color
    --aa2-warn
    Background
    --aa2-warn-bg

  • Error

    Something failed, or must be fixed before going on. Its word: Error.

    Light theme

    Color
    --aa2-bad
    Background
    --aa2-bad-bg

    Dark theme

    Color
    --aa2-bad
    Background
    --aa2-bad-bg

  • Information

    Something worth knowing; nothing to do. Its word: Note.

    Light theme

    Color
    --aa2-info
    Background
    --aa2-info-bg

    Dark theme

    Color
    --aa2-info
    Background
    --aa2-info-bg

The dark theme's warning, #E2C766, is also its focus ring and accent text, which the site does on purpose; it is one more reason the word and the icon always come with it.

Measured

Readable wherever they appear

Each state is used in five places, and each of them carries words, so each needs 4.5:1 for AA and 7:1 for AAA.

  • The word on its tint. The heading of an alert: "Error" on the error background.
  • Body text on its tint. The message of an alert, in the theme's text color.
  • The word on the page. An inline message under a field.
  • The word on a card. A status inside a card or table.
  • A label on the solid color. A badge: the state as a fill, its word in the page color.
Uses measured
40
Weakest, light theme
5.29:1 Error, the word on its tint
Weakest, dark theme
6.16:1 Error, the word on its tint
Below 4.5:1
0
Every use of every status color, in both themes, measured
State and useSampleRatioVerdict
Light theme
Successthe word on its tint
 #136B39 / #E8F5EE 5.87:1 Passes AA
Successbody text on its tint
 #2F2B24 / #E8F5EE 12.55:1 Passes AAA
Successthe word on the page
 #136B39 / #F5F0E6 5.79:1 Passes AA
Successthe word on a card
 #136B39 / #FCF9F2 6.26:1 Passes AA
Successa label on the solid color
 #F5F0E6 / #136B39 5.79:1 Passes AA
Warningthe word on its tint
 #92400E / #FEF3C7 6.36:1 Passes AA
Warningbody text on its tint
 #2F2B24 / #FEF3C7 12.64:1 Passes AAA
Warningthe word on the page
 #92400E / #F5F0E6 6.24:1 Passes AA
Warningthe word on a card
 #92400E / #FCF9F2 6.74:1 Passes AA
Warninga label on the solid color
 #F5F0E6 / #92400E 6.24:1 Passes AA
Errorthe word on its tint
 #B91C1C / #FEE2E2 5.29:1 Passes AA
Errorbody text on its tint
 #2F2B24 / #FEE2E2 11.52:1 Passes AAA
Errorthe word on the page
 #B91C1C / #F5F0E6 5.69:1 Passes AA
Errorthe word on a card
 #B91C1C / #FCF9F2 6.15:1 Passes AA
Errora label on the solid color
 #F5F0E6 / #B91C1C 5.69:1 Passes AA
Informationthe word on its tint
 #1E40AF / #EFF6FF 8.01:1 Passes AAA
Informationbody text on its tint
 #2F2B24 / #EFF6FF 12.93:1 Passes AAA
Informationthe word on the page
 #1E40AF / #F5F0E6 7.67:1 Passes AAA
Informationthe word on a card
 #1E40AF / #FCF9F2 8.29:1 Passes AAA
Informationa label on the solid color
 #F5F0E6 / #1E40AF 7.67:1 Passes AAA
Dark theme
Successthe word on its tint
 #4ADE80 / #12281C 8.95:1 Passes AAA
Successbody text on its tint
 #F2EFE9 / #12281C 13.59:1 Passes AAA
Successthe word on the page
 #4ADE80 / #0F0E0C 11.07:1 Passes AAA
Successthe word on a card
 #4ADE80 / #171613 10.38:1 Passes AAA
Successa label on the solid color
 #0F0E0C / #4ADE80 11.07:1 Passes AAA
Warningthe word on its tint
 #E2C766 / #2A2312 9.34:1 Passes AAA
Warningbody text on its tint
 #F2EFE9 / #2A2312 13.57:1 Passes AAA
Warningthe word on the page
 #E2C766 / #0F0E0C 11.57:1 Passes AAA
Warningthe word on a card
 #E2C766 / #171613 10.85:1 Passes AAA
Warninga label on the solid color
 #0F0E0C / #E2C766 11.57:1 Passes AAA
Errorthe word on its tint
 #F87171 / #241A12 6.16:1 Passes AA
Errorbody text on its tint
 #F2EFE9 / #241A12 14.85:1 Passes AAA
Errorthe word on the page
 #F87171 / #0F0E0C 6.97:1 Passes AA
Errorthe word on a card
 #F87171 / #171613 6.54:1 Passes AA
Errora label on the solid color
 #0F0E0C / #F87171 6.97:1 Passes AA
Informationthe word on its tint
 #93C5FD / #16202E 9.09:1 Passes AAA
Informationbody text on its tint
 #F2EFE9 / #16202E 14.29:1 Passes AAA
Informationthe word on the page
 #93C5FD / #0F0E0C 10.69:1 Passes AAA
Informationthe word on a card
 #93C5FD / #171613 10.03:1 Passes AAA
Informationa label on the solid color
 #0F0E0C / #93C5FD 10.69:1 Passes AAA

Color vision

Told apart without color

How far apart every two states' colors are, as typical vision and four simulated visions see them. Under about 2 two colors look the same, and under 10 they can be confused at a glance.

Light theme

The four colors as each vision sees them, light theme
VisionSuccessWarningErrorInformation
Typical vision Success Warning Error Information
Protanopia Success Warning Error Information
Deuteranopia Success Warning Error Information
Tritanopia Success Warning Error Information
Achromatopsia Success Warning Error Information
How far apart every two states are (CIEDE2000), light theme
StatesTypical visionProtanopiaDeuteranopiaTritanopiaAchromatopsia
Success and warning 46.80 Distinct 8.94 Noticeable 11.04 Distinct 52.58 Distinct 1.79 Very close
Success and error 61.12 Distinct 8.56 Noticeable 12.85 Distinct 56.69 Distinct 0.36 Imperceptible, the closest two
Success and information 47.31 Distinct 47.74 Distinct 44.97 Distinct 14.53 Distinct 6.31 Noticeable
Warning and error 13.15 Distinct, the closest two 4.40 Close match, the closest two 4.07 Close match, the closest two 9.99 Noticeable, the closest two 2.16 Close match
Warning and information 46.17 Distinct 53.47 Distinct 57.61 Distinct 50.88 Distinct 4.52 Close match
Error and information 43.18 Distinct 49.20 Distinct 59.10 Distinct 56.32 Distinct 6.67 Noticeable

Dark theme

The four colors as each vision sees them, dark theme
VisionSuccessWarningErrorInformation
Typical vision Success Warning Error Information
Protanopia Success Warning Error Information
Deuteranopia Success Warning Error Information
Tritanopia Success Warning Error Information
Achromatopsia Success Warning Error Information
How far apart every two states are (CIEDE2000), dark theme
StatesTypical visionProtanopiaDeuteranopiaTritanopiaAchromatopsia
Success and warning 28.78 Distinct, the closest two 3.71 Close match, the closest two 7.85 Noticeable 45.76 Distinct 1.00 Very close
Success and error 71.47 Distinct 22.74 Distinct 6.89 Noticeable, the closest two 70.65 Distinct 11.53 Distinct
Success and information 44.13 Distinct 44.20 Distinct 41.81 Distinct 10.72 Distinct, the closest two 0.76 Imperceptible, the closest two
Warning and error 41.59 Distinct 22.81 Distinct 12.31 Distinct 21.46 Distinct 12.52 Distinct
Warning and information 50.98 Distinct 46.85 Distinct 48.62 Distinct 39.91 Distinct 1.77 Very close
Error and information 43.98 Distinct 36.44 Distinct 42.30 Distinct 66.55 Distinct 10.77 Distinct

In OKLCH lightness the light theme's four states sit between 0.42 and 0.51, and the dark theme's between 0.71 and 0.83. Each has to read as text on its page, so they are close in lightness by design, and grayscale cannot tell them apart. It is not asked to: the icon and the word carry the state.

Live preview

The states in use

Both themes, built only from the tokens above. Choose a vision to see the previews as a reader with it would.

See the previews as

Light theme

Success Payment received. A receipt is on its way.

Warning Your trial ends in three days.

Error The upload failed. Check the file and try again.

Note A new version of the report is ready.

Services
ServiceStatus
WebsiteLive
CheckoutSlow
PaymentsFailed
Help centerQueued

Error: Enter an email address, like [email protected].

Saved. The next report goes to this address.

Dark theme

Success Payment received. A receipt is on its way.

Warning Your trial ends in three days.

Error The upload failed. Check the file and try again.

Note A new version of the report is ready.

Services
ServiceStatus
WebsiteLive
CheckoutSlow
PaymentsFailed
Help centerQueued

Error: Enter an email address, like [email protected].

Saved. The next report goes to this address.

The simulation is Machado's model at full severity, the same as the chart palettes and the color-vision pages, applied to the previews as an SVG filter; it works without JavaScript. The field is a sample in its error state and sends nothing.

How it holds

The rules behind the states

Color alone cannot carry a state, so four rules carry it with color.

  • Every state has an icon and a word. By color alone the four do not hold apart for everyone. In grayscale the light theme's success and error are ΔE 0.36 apart, the same gray; with deuteranopia its warning and error are ΔE 4.07; with protanopia the dark theme's success and warning are ΔE 3.71. A check, a triangle, a cross and an "i", each with its word, say the state whatever the color looks like.
  • Each state has its own tint, and its word clears AA on it. The weakest is error on its background in the light theme, 5.29:1; the message itself is set in the theme's text color.
  • A badge is a solid fill with the page color for its word. The weakest is error in the light theme, 5.69:1.
  • An error names itself. "Error:" leads the message, the message says how to fix it, and it is tied to the field it is about, so the state is not a red border alone.

Code

Export the states

All 16 values: four states, a color and a background, in two themes.

The CSS uses one set of names and swaps the values for a dark scheme; Tailwind and DTCG name both themes.

CSS custom properties, light and dark

/* Generated by Auric Artisan status colors on 2026-10-11 */
/* Light values by default; dark ones when the reader prefers a dark scheme. */
:root {
  --status-ok-fg: #136B39; /* Success (--aa2-ok) */
  --status-ok-bg: #E8F5EE; /* Success background (--aa2-ok-bg) */
  --status-warn-fg: #92400E; /* Warning (--aa2-warn) */
  --status-warn-bg: #FEF3C7; /* Warning background (--aa2-warn-bg) */
  --status-bad-fg: #B91C1C; /* Error (--aa2-bad) */
  --status-bad-bg: #FEE2E2; /* Error background (--aa2-bad-bg) */
  --status-info-fg: #1E40AF; /* Information (--aa2-info) */
  --status-info-bg: #EFF6FF; /* Information background (--aa2-info-bg) */
}

@media (prefers-color-scheme: dark) {
  :root {
    --status-ok-fg: #4ADE80; /* Success (--aa2-ok) */
    --status-ok-bg: #12281C; /* Success background (--aa2-ok-bg) */
    --status-warn-fg: #E2C766; /* Warning (--aa2-warn) */
    --status-warn-bg: #2A2312; /* Warning background (--aa2-warn-bg) */
    --status-bad-fg: #F87171; /* Error (--aa2-bad) */
    --status-bad-bg: #241A12; /* Error background (--aa2-bad-bg) */
    --status-info-fg: #93C5FD; /* Information (--aa2-info) */
    --status-info-bg: #16202E; /* Information background (--aa2-info-bg) */
  }
}

Tailwind config

// Generated by Auric Artisan status colors on 2026-10-11
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      colors: {
        "status": {
          "light": {
            "ok": {
              "fg": "#136B39",
              "bg": "#E8F5EE"
            },
            "warn": {
              "fg": "#92400E",
              "bg": "#FEF3C7"
            },
            "bad": {
              "fg": "#B91C1C",
              "bg": "#FEE2E2"
            },
            "info": {
              "fg": "#1E40AF",
              "bg": "#EFF6FF"
            }
          },
          "dark": {
            "ok": {
              "fg": "#4ADE80",
              "bg": "#12281C"
            },
            "warn": {
              "fg": "#E2C766",
              "bg": "#2A2312"
            },
            "bad": {
              "fg": "#F87171",
              "bg": "#241A12"
            },
            "info": {
              "fg": "#93C5FD",
              "bg": "#16202E"
            }
          }
        }
      }
    },
  },
};

Design tokens (W3C DTCG)

{
  "$schema": "https://schemas.tokens.studio/latest/tokens-schema.json",
  "$description": "Generated by Auric Artisan status colors on 2026-10-11",
  "status": {
    "light": {
      "ok": {
        "fg": {
          "$value": "#136B39",
          "$type": "color",
          "$description": "Success (--aa2-ok)"
        },
        "bg": {
          "$value": "#E8F5EE",
          "$type": "color",
          "$description": "Success background (--aa2-ok-bg)"
        }
      },
      "warn": {
        "fg": {
          "$value": "#92400E",
          "$type": "color",
          "$description": "Warning (--aa2-warn)"
        },
        "bg": {
          "$value": "#FEF3C7",
          "$type": "color",
          "$description": "Warning background (--aa2-warn-bg)"
        }
      },
      "bad": {
        "fg": {
          "$value": "#B91C1C",
          "$type": "color",
          "$description": "Error (--aa2-bad)"
        },
        "bg": {
          "$value": "#FEE2E2",
          "$type": "color",
          "$description": "Error background (--aa2-bad-bg)"
        }
      },
      "info": {
        "fg": {
          "$value": "#1E40AF",
          "$type": "color",
          "$description": "Information (--aa2-info)"
        },
        "bg": {
          "$value": "#EFF6FF",
          "$type": "color",
          "$description": "Information background (--aa2-info-bg)"
        }
      }
    },
    "dark": {
      "ok": {
        "fg": {
          "$value": "#4ADE80",
          "$type": "color",
          "$description": "Success (--aa2-ok)"
        },
        "bg": {
          "$value": "#12281C",
          "$type": "color",
          "$description": "Success background (--aa2-ok-bg)"
        }
      },
      "warn": {
        "fg": {
          "$value": "#E2C766",
          "$type": "color",
          "$description": "Warning (--aa2-warn)"
        },
        "bg": {
          "$value": "#2A2312",
          "$type": "color",
          "$description": "Warning background (--aa2-warn-bg)"
        }
      },
      "bad": {
        "fg": {
          "$value": "#F87171",
          "$type": "color",
          "$description": "Error (--aa2-bad)"
        },
        "bg": {
          "$value": "#241A12",
          "$type": "color",
          "$description": "Error background (--aa2-bad-bg)"
        }
      },
      "info": {
        "fg": {
          "$value": "#93C5FD",
          "$type": "color",
          "$description": "Information (--aa2-info)"
        },
        "bg": {
          "$value": "#16202E",
          "$type": "color",
          "$description": "Information background (--aa2-info-bg)"
        }
      }
    }
  }
}

Plain text to paste; nothing is downloaded. Free to use in any project.

Sources

Sources and method

Where the values, the thresholds and the simulation come from.

Ratios are the WCAG 2 contrast ratio, floored to two decimals; distances are CIEDE2000 after simulating each vision with Machado's model at full severity, from this site's color engine. A Node test reads the values from the stylesheet and recomputes every number on this page. Checked with axe and the keyboard in Chromium; not yet tested with a screen reader. Last reviewed on 11 October 2026.

Related