Skip to content
DGA UI

Colors

DGA primitives, semantic tokens for light and dark, and their WCAG contrast ratios.

On this page

DGA colours come in two layers. Primitives are the raw palettes (SA Flag green, gold, lavender, neutral, status). Semantic tokens (--text-primary, --background-body …) point at primitives and switch between light and dark. Use semantic tokens in components so dark mode works on its own.

Semantic tokens in context
service-card-direction
service-card-theme
service-card-viewport
Mobile · 375px
Status colours and fills
status-colors-direction
status-colors-theme
status-colors-viewport
Mobile · 375px

Utilities

Every semantic token has two Tailwind utilities.

KindRuleExample
Figma-identical{utility}-{token name}, one-to-one with the Figma variabletext-text-primary, bg-background-body, border-border-primary
Short aliasThe token name without its category prefixtext-primary, bg-body, border-primary

Short aliases exist only for background-*, text-* and border-* tokens. An alias is skipped when it would hide a palette colour (bg-white, bg-neutral-50 stay the raw palette) or change a shadcn utility's meaning (bg-primary, bg-secondary stay shadcn). In those cases use the Figma-identical form.

page.tsx
<p className="text-primary-paragraph">…</p>      {/* alias */}
<p className="text-text-primary-paragraph">…</p> {/* Figma-identical, same colour */}

Semantic tokens

The badge shows the lowest contrast ratio from the audited pairs in that mode, for example a text token on body, white and card surfaces. For fills, it shows the on-colour text on top. Tokens marked changed differ from Figma; see Deviations.

23 of 448 tokens

  • --text-primaryText/text-primary
    text-primary
    Light
    #1b8354colors-primary-sa-flag-600-primary4.53:1 AA
    Dark
    #54c08acolors-primary-sa-flag-4006.42:1 AA
  • --text-displayText/text-display
    text-display
    Light
    #1f2a37colors-neutral-80013.91:1 AAA
    Dark
    #f9fafbcolors-neutral-5013.91:1 AAA
  • --text-primary-paragraphText/text-primary-paragraph
    text-primary-paragraph
    Light
    #384250colors-neutral-7009.73:1 AAA
    Dark
    #f3f4f6colors-neutral-10013.20:1 AAA
  • --text-secondary-paragraphText/text-secondary-paragraph
    text-secondary-paragraph
    Light
    #6c737fcolors-neutral-5004.57:1 AA
    Dark
    #e5e7ebcolors-neutral-20011.74:1 AAA
  • --text-successText/text-success
    text-success
    Light
    #067647colors-green-7005.39:1 AA
    Dark
    #47cd89colors-green-4007.17:1 AAA
  • --text-infoText/text-info
    text-info
    Light
    #175cd3colors-blue-7005.57:1 AA
    Dark
    #53b1fdcolors-blue-4006.28:1 AA
  • --text-warningText/text-warning
    text-warning
    Light
    #b54708colors-yellow-7005.19:1 AA
    Dark
    #fdb022colors-yellow-4007.89:1 AAA
  • --text-errorText/text-error
    text-error
    Light
    #b42318colors-red-7006.04:1 AA
    Dark
    #f97066colors-red-4005.21:1 AA
  • --text-oncolor-primaryText/text-oncolor-primary
    text-oncolor-primary
    Light
    #ffffffcolors-base-white4.56:1 AA
    Dark
    #ffffffcolors-base-white4.56:1 AA
  • --text-defaultText/text-default
    text-default
    Light
    #161616colors-base-black17.31:1 AAA
    Dark
    #ffffffcolors-base-white14.53:1 AAA
  • --text-form-titleForm/text-form-title
    text-form-title
    Light
    #161616text-default17.31:1 AAA
    Dark
    #fffffftext-default14.53:1 AAA
  • --text-form-paragraphForm/text-form-paragraph
    text-form-paragraph
    Light
    #6c737ftext-secondary-paragraph4.57:1 AA
    Dark
    #e5e7ebtext-secondary-paragraph11.74:1 AAA
  • --text-default-disabledGlobal/text-default-disabled
    text-default-disabled
    Light
    #9da4aecolors-neutral-400
    Dark
    #9da4aecolors-neutral-400
  • --text-default-oncolor-disabledGlobal/text-default-oncolor-disabled
    text-default-oncolor-disabled
    Light
    #ffffff66alpha-white-40
    Dark
    #ffffff66alpha-black-40
  • --text-primary-lightText/text-primary-light
    text-primary-light
    Light
    #88d8adcolors-primary-sa-flag-3005.08:1 AA
    Dark
    #54c08acolors-primary-sa-flag-4006.42:1 AA
  • --text-primary-sa-flagText/text-primary-sa-flag
    text-primary-sa-flag
    Light
    #14573acolors-primary-sa-flag-8008.18:1 AAA
    Dark
    #dff6e7colors-primary-sa-flag-10012.78:1 AAA
  • --text-oncolor-secondaryText/text-oncolor-secondary
    text-oncolor-secondarychanged
    Light
    #ffffffccalpha-white-806.13:1 AA
    Dark
    #ffffffcccolors-alpha-alpha-white-806.13:1 AA
  • --text-oncolor-tertiaryText/text-oncolor-tertiary
    text-oncolor-tertiarychanged
    Light
    #ffffffb2alpha-white-705.09:1 AA
    Dark
    #ffffffb2colors-alpha-alpha-white-705.09:1 AA
  • --text-secondary
    changedsite CSS only
    Light
    #945c01colors-secondary-gold-8005.30:1 AA
    Dark
    #dba102colors-secondary-gold-600-primary6.30:1 AA
  • --text-tertiary
    text-tertiarychangedsite CSS only
    Light
    #80519fcolors-tertiary-lavender-500-primary5.58:1 AA
    Dark
    #ccadd9colors-tertiary-lavender-3007.30:1 AAA
  • --text-secondary-light
    text-secondary-lightsite CSS only
    Light
    #fae996colors-secondary-gold-3006.99:1 AA
    Dark
    #fae996colors-secondary-gold-30011.87:1 AAA
  • --text-tertiary-light
    text-tertiary-lightchangedsite CSS only
    Light
    #e1cce8colors-tertiary-lavender-2005.70:1 AA
    Dark
    #ccadd9colors-tertiary-lavender-3007.30:1 AAA
  • --text-on-gold
    text-on-goldchangedDGA UI
    Light
    #161616colors-base-black7.85:1 AAA
    Dark
    #161616colors-base-black7.85:1 AAA

Short aliases

Short alias:text-primaryFigma-identical utility:text-text-primaryToken:--text-primary
Short alias:border-neutral-primaryFigma-identical utility:border-border-neutral-primaryToken:--border-neutral-primary
Short alias:border-neutral-secondaryFigma-identical utility:border-border-neutral-secondaryToken:--border-neutral-secondary
Short alias:border-neutral-tertiaryFigma-identical utility:border-border-neutral-tertiaryToken:--border-neutral-tertiary
Short alias:bg-primary-50Figma-identical utility:bg-background-primary-50Token:--background-primary-50
Short alias:bg-secondary-50Figma-identical utility:bg-background-secondary-50Token:--background-secondary-50
Short alias:bg-tertiary-50Figma-identical utility:bg-background-tertiary-50Token:--background-tertiary-50
Short alias:bg-success-50Figma-identical utility:bg-background-success-50Token:--background-success-50
Short alias:bg-info-50Figma-identical utility:bg-background-info-50Token:--background-info-50
Short alias:bg-warning-50Figma-identical utility:bg-background-warning-50Token:--background-warning-50
Short alias:bg-error-50Figma-identical utility:bg-background-error-50Token:--background-error-50
Short alias:text-displayFigma-identical utility:text-text-displayToken:--text-display
Short alias:text-primary-paragraphFigma-identical utility:text-text-primary-paragraphToken:--text-primary-paragraph
Short alias:text-secondary-paragraphFigma-identical utility:text-text-secondary-paragraphToken:--text-secondary-paragraph
Short alias:text-successFigma-identical utility:text-text-successToken:--text-success
Short alias:text-infoFigma-identical utility:text-text-infoToken:--text-info
Short alias:text-warningFigma-identical utility:text-text-warningToken:--text-warning
Short alias:text-errorFigma-identical utility:text-text-errorToken:--text-error
Short alias:border-successFigma-identical utility:border-border-successToken:--border-success
Short alias:border-infoFigma-identical utility:border-border-infoToken:--border-info
Short alias:border-warningFigma-identical utility:border-border-warningToken:--border-warning
Short alias:border-errorFigma-identical utility:border-border-errorToken:--border-error
Short alias:border-background-whiteFigma-identical utility:border-border-background-whiteToken:--border-background-white
Short alias:border-background-neutralFigma-identical utility:border-border-background-neutralToken:--border-background-neutral
Short alias:border-primary-lightFigma-identical utility:border-border-primary-lightToken:--border-primary-light
Short alias:text-oncolor-primaryFigma-identical utility:text-text-oncolor-primaryToken:--text-oncolor-primary
Short alias:text-defaultFigma-identical utility:text-text-defaultToken:--text-default
Short alias:text-form-titleFigma-identical utility:text-text-form-titleToken:--text-form-title
Short alias:text-form-paragraphFigma-identical utility:text-text-form-paragraphToken:--text-form-paragraph
Short alias:border-primaryFigma-identical utility:border-border-primaryToken:--border-primary
Short alias:bg-successFigma-identical utility:bg-background-successToken:--background-success
Short alias:bg-infoFigma-identical utility:bg-background-infoToken:--background-info
Short alias:bg-warningFigma-identical utility:bg-background-warningToken:--background-warning
Short alias:bg-errorFigma-identical utility:bg-background-errorToken:--background-error
Short alias:border-success-lightFigma-identical utility:border-border-success-lightToken:--border-success-light
Short alias:border-info-lightFigma-identical utility:border-border-info-lightToken:--border-info-light
Short alias:border-warning-lightFigma-identical utility:border-border-warning-lightToken:--border-warning-light
Short alias:border-error-lightFigma-identical utility:border-border-error-lightToken:--border-error-light
Short alias:bg-sa-flagFigma-identical utility:bg-background-sa-flagToken:--background-sa-flag
Short alias:text-default-disabledFigma-identical utility:text-text-default-disabledToken:--text-default-disabled
Short alias:text-default-oncolor-disabledFigma-identical utility:text-text-default-oncolor-disabledToken:--text-default-oncolor-disabled
Short alias:border-white-40Figma-identical utility:border-border-white-40Token:--border-white-40
Short alias:bg-disabledFigma-identical utility:bg-background-disabledToken:--background-disabled
Short alias:bg-bodyFigma-identical utility:bg-background-bodyToken:--background-body
Short alias:bg-primary-25Figma-identical utility:bg-background-primary-25Token:--background-primary-25
Short alias:bg-secondary-25Figma-identical utility:bg-background-secondary-25Token:--background-secondary-25
Short alias:bg-tertiary-25Figma-identical utility:bg-background-tertiary-25Token:--background-tertiary-25
Short alias:bg-success-25Figma-identical utility:bg-background-success-25Token:--background-success-25
Short alias:bg-info-25Figma-identical utility:bg-background-info-25Token:--background-info-25
Short alias:bg-warning-25Figma-identical utility:bg-background-warning-25Token:--background-warning-25
Short alias:bg-error-25Figma-identical utility:bg-background-error-25Token:--background-error-25
Short alias:bg-menuFigma-identical utility:bg-background-menuToken:--background-menu
Short alias:bg-inverse-disabledFigma-identical utility:bg-background-inverse-disabledToken:--background-inverse-disabled
Short alias:border-transparent-10Figma-identical utility:border-border-transparent-10Token:--border-transparent-10
Short alias:text-primary-lightFigma-identical utility:text-text-primary-lightToken:--text-primary-light
Short alias:bg-disabled-primaryFigma-identical utility:bg-background-disabled-primaryToken:--background-disabled-primary
Short alias:text-primary-sa-flagFigma-identical utility:text-text-primary-sa-flagToken:--text-primary-sa-flag
Short alias:bg-cardFigma-identical utility:bg-background-cardToken:--background-card
Short alias:bg-primary-400Figma-identical utility:bg-background-primary-400Token:--background-primary-400
Short alias:border-oncolor-transparent-30Figma-identical utility:border-border-oncolor-transparent-30Token:--border-oncolor-transparent-30
Short alias:text-oncolor-secondaryFigma-identical utility:text-text-oncolor-secondaryToken:--text-oncolor-secondary
Short alias:text-oncolor-tertiaryFigma-identical utility:text-text-oncolor-tertiaryToken:--text-oncolor-tertiary
Short alias:bg-notification-whiteFigma-identical utility:bg-background-notification-whiteToken:--background-notification-white
Short alias:bg-primary-200Figma-identical utility:bg-background-primary-200Token:--background-primary-200
Short alias:bg-warning-lightFigma-identical utility:bg-background-warning-lightToken:--background-warning-light
Short alias:bg-error-lightFigma-identical utility:bg-background-error-lightToken:--background-error-light
Short alias:bg-brand-lightFigma-identical utility:bg-background-brand-lightToken:--background-brand-light
Short alias:bg-info-lightFigma-identical utility:bg-background-info-lightToken:--background-info-light
Short alias:bg-success-lightFigma-identical utility:bg-background-success-lightToken:--background-success-light
Short alias:border-disabledFigma-identical utility:border-border-disabledToken:--border-disabled
Short alias:bg-nav-headerFigma-identical utility:bg-background-nav-headerToken:--background-nav-header
Short alias:bg-surface-oncolorFigma-identical utility:bg-background-surface-oncolorToken:--background-surface-oncolor
Short alias:bg-tertiaryFigma-identical utility:bg-background-tertiaryToken:--background-tertiary
Short alias:text-tertiaryFigma-identical utility:text-text-tertiaryToken:--text-tertiary
Short alias:text-secondary-lightFigma-identical utility:text-text-secondary-lightToken:--text-secondary-light
Short alias:text-tertiary-lightFigma-identical utility:text-text-tertiary-lightToken:--text-tertiary-light
Short alias:border-secondary-lightFigma-identical utility:border-border-secondary-lightToken:--border-secondary-light
Short alias:border-tertiaryFigma-identical utility:border-border-tertiaryToken:--border-tertiary
Short alias:border-tertiary-lightFigma-identical utility:border-border-tertiary-lightToken:--border-tertiary-light
Short alias:text-on-goldFigma-identical utility:text-text-on-goldToken:--text-on-gold

shadcn variables

shadcn components use --background, --primary and the rest. DGA UI maps each one to a DGA semantic token, so shadcn and DGA utilities always agree.

shadcn variable:--backgroundDGA token:--background-bodyLight:Dark:
shadcn variable:--foregroundDGA token:--text-defaultLight:Dark:
shadcn variable:--cardDGA token:--background-cardLight:Dark:
shadcn variable:--card-foregroundDGA token:--text-defaultLight:Dark:
shadcn variable:--popoverDGA token:--background-menuLight:Dark:
shadcn variable:--popover-foregroundDGA token:--text-defaultLight:Dark:
shadcn variable:--primaryDGA token:--background-primaryLight:Dark:
shadcn variable:--primary-foregroundDGA token:--text-oncolor-primaryLight:Dark:
shadcn variable:--secondaryDGA token:--button-background-neutral-defaultLight:Dark:
shadcn variable:--secondary-foregroundDGA token:--text-defaultLight:Dark:
shadcn variable:--mutedDGA token:--background-neutral-100Light:Dark:
shadcn variable:--muted-foregroundDGA token:--text-secondary-paragraphLight:Dark:
shadcn variable:--accentDGA token:--background-neutral-100Light:Dark:
shadcn variable:--accent-foregroundDGA token:--text-defaultLight:Dark:
shadcn variable:--destructiveDGA token:--background-errorLight:Dark:
shadcn variable:--destructive-foregroundDGA token:--text-oncolor-primaryLight:Dark:
shadcn variable:--borderDGA token:--border-neutral-secondaryLight:Dark:
shadcn variable:--inputDGA token:--border-neutral-primaryLight:Dark:
shadcn variable:--ringDGA token:--border-blackLight:Dark:
shadcn variable:--chart-1DGA token:--charts-greenLight:Dark:
shadcn variable:--chart-2DGA token:--charts-goldLight:Dark:
shadcn variable:--chart-3DGA token:--charts-blueLight:Dark:
shadcn variable:--chart-4DGA token:--charts-lavenderLight:Dark:
shadcn variable:--chart-5DGA token:--charts-redLight:Dark:
shadcn variable:--sidebarDGA token:--background-whiteLight:Dark:
shadcn variable:--sidebar-foregroundDGA token:--text-defaultLight:Dark:
shadcn variable:--sidebar-primaryDGA token:--background-primaryLight:Dark:
shadcn variable:--sidebar-primary-foregroundDGA token:--text-oncolor-primaryLight:Dark:
shadcn variable:--sidebar-accentDGA token:--background-neutral-100Light:Dark:
shadcn variable:--sidebar-accent-foregroundDGA token:--text-defaultLight:Dark:
shadcn variable:--sidebar-borderDGA token:--border-neutral-secondaryLight:Dark:
shadcn variable:--sidebar-ringDGA token:--border-blackLight:Dark:

Primitives

Palette utilities use the Figma name (bg-primary-sa-flag-600-primary) or a short hue name for the brand colours (bg-sa-flag-600, bg-gold-600, bg-lavender-500, bg-white, bg-black).

Brand and neutral

Base

  • Aa
    base-white#ffffff
    1.00:1 Fail18.09:1 AAA
  • Aa
    base-black#161616
    18.09:1 AAA1.00:1 Fail

Neutral

  • Aa
    neutral-25#fcfcfd
    1.02:1 Fail17.64:1 AAA
  • Aa
    neutral-50#f9fafb
    1.04:1 Fail17.31:1 AAA
  • Aa
    neutral-100#f3f4f6
    1.10:1 Fail16.44:1 AAA
  • Aa
    neutral-200#e5e7eb
    1.23:1 Fail14.61:1 AAA
  • Aa
    neutral-300#d2d6db
    1.46:1 Fail12.39:1 AAA
  • Aa
    neutral-400#9da4ae
    2.51:1 Fail7.19:1 AAA
  • Aa
    neutral-500#6c737f
    4.77:1 AA3.78:1 Fail
  • Aa
    neutral-600#4d5761
    7.36:1 AAA2.45:1 Fail
  • Aa
    neutral-700#384250
    10.17:1 AAA1.77:1 Fail
  • Aa
    neutral-800#1f2a37
    14.53:1 AAA1.24:1 Fail
  • Aa
    neutral-900#111927
    17.61:1 AAA1.02:1 Fail
  • Aa
    neutral-950#0d121c
    18.74:1 AAA1.03:1 Fail

SA Flag green (primary)

  • Aa
    primary-sa-flag-25#f7fdf9
    1.03:1 Fail17.55:1 AAA
  • Aa
    primary-sa-flag-50#f3fcf6
    1.04:1 Fail17.29:1 AAA
  • Aa
    primary-sa-flag-100#dff6e7
    1.13:1 Fail15.91:1 AAA
  • Aa
    primary-sa-flag-200#b8eacb
    1.34:1 Fail13.50:1 AAA
  • Aa
    primary-sa-flag-300#88d8ad
    1.68:1 Fail10.74:1 AAA
  • Aa
    primary-sa-flag-400#54c08a
    2.26:1 Fail8.00:1 AAA
  • Aa
    primary-sa-flag-500#25935f
    3.87:1 Fail4.66:1 AA
  • Aa
    primary-sa-flag-600-primary#1b8354
    4.74:1 AA3.80:1 Fail
  • Aa
    primary-sa-flag-700#166a45
    6.60:1 AA2.74:1 Fail
  • Aa
    primary-sa-flag-800#14573a
    8.55:1 AAA2.11:1 Fail
  • Aa
    primary-sa-flag-900#104631
    10.81:1 AAA1.67:1 Fail
  • Aa
    primary-sa-flag-950#092a1e
    15.42:1 AAA1.17:1 Fail

Gold (secondary)

  • Aa
    secondary-gold-25#fffef7
    1.01:1 Fail17.89:1 AAA
  • Aa
    secondary-gold-50#fffef2
    1.01:1 Fail17.84:1 AAA
  • Aa
    secondary-gold-100#fffce6
    1.03:1 Fail17.50:1 AAA
  • Aa
    secondary-gold-200#fcf3bd
    1.12:1 Fail16.10:1 AAA
  • Aa
    secondary-gold-300#fae996
    1.22:1 Fail14.78:1 AAA
  • Aa
    secondary-gold-400#f7d54d
    1.44:1 Fail12.56:1 AAA
  • Aa
    secondary-gold-500#f5bd02
    1.72:1 Fail10.48:1 AAA
  • Aa
    secondary-gold-600-primary#dba102
    2.30:1 Fail7.85:1 AAA
  • Aa
    secondary-gold-700#b87b02
    3.57:1 Fail5.06:1 AA
  • Aa
    secondary-gold-800#945c01
    5.54:1 AA3.26:1 Fail
  • Aa
    secondary-gold-900#6e3c00
    9.09:1 AAA1.99:1 Fail
  • Aa
    secondary-gold-950#472400
    13.81:1 AAA1.31:1 Fail

Lavender (tertiary)

  • Aa
    tertiary-lavender-25#fefcff
    1.02:1 Fail17.73:1 AAA
  • Aa
    tertiary-lavender-50#f9f5fa
    1.07:1 Fail16.77:1 AAA
  • Aa
    tertiary-lavender-100#f2e9f5
    1.18:1 Fail15.29:1 AAA
  • Aa
    tertiary-lavender-200#e1cce8
    1.49:1 Fail12.06:1 AAA
  • Aa
    tertiary-lavender-300#ccadd9
    1.99:1 Fail9.08:1 AAA
  • Aa
    tertiary-lavender-400#a57bba
    3.41:1 Fail5.29:1 AA
  • Aa
    tertiary-lavender-500-primary#80519f
    5.84:1 AA3.09:1 Fail
  • Aa
    tertiary-lavender-600#6d428f
    7.43:1 AAA2.43:1 Fail
  • Aa
    tertiary-lavender-700#532d75
    10.49:1 AAA1.72:1 Fail
  • Aa
    tertiary-lavender-800#3d1d5e
    13.67:1 AAA1.32:1 Fail
  • Aa
    tertiary-lavender-900#281047
    16.72:1 AAA1.08:1 Fail
  • Aa
    tertiary-lavender-950#16072e
    19.02:1 AAA1.05:1 Fail

Each swatch shows the contrast of white (text-oncolor-primary, #ffffff) and of black (text-default, #161616) text on it. Translucent swatches are measured over white.

Status

Status: red

  • Aa
    red-25#fffbfa
    1.02:1 Fail17.60:1 AAA
  • Aa
    red-50#fef3f2
    1.08:1 Fail16.64:1 AAA
  • Aa
    red-100#fee4e2
    1.20:1 Fail15.00:1 AAA
  • Aa
    red-200#fecdca
    1.41:1 Fail12.75:1 AAA
  • Aa
    red-300#fda29b
    1.94:1 Fail9.32:1 AAA
  • Aa
    red-400#f97066
    2.78:1 Fail6.49:1 AA
  • Aa
    red-500#f04438
    3.75:1 Fail4.81:1 AA
  • Aa
    red-600#d92d20
    4.83:1 AA3.74:1 Fail
  • Aa
    red-700#b42318
    6.57:1 AA2.75:1 Fail
  • Aa
    red-800#912018
    8.66:1 AAA2.08:1 Fail
  • Aa
    red-900#7a271a
    9.84:1 AAA1.83:1 Fail
  • Aa
    red-950#55160c
    13.94:1 AAA1.29:1 Fail

Status: yellow

  • Aa
    yellow-25#fffcf5
    1.02:1 Fail17.66:1 AAA
  • Aa
    yellow-50#fffaeb
    1.04:1 Fail17.34:1 AAA
  • Aa
    yellow-100#fef0c7
    1.13:1 Fail15.94:1 AAA
  • Aa
    yellow-200#fedf89
    1.30:1 Fail13.90:1 AAA
  • Aa
    yellow-300#fec84b
    1.54:1 Fail11.70:1 AAA
  • Aa
    yellow-400#fdb022
    1.84:1 Fail9.83:1 AAA
  • Aa
    yellow-500#f79009
    2.34:1 Fail7.71:1 AAA
  • Aa
    yellow-600#dc6803
    3.48:1 Fail5.19:1 AA
  • Aa
    yellow-700#b54708
    5.42:1 AA3.33:1 Fail
  • Aa
    yellow-800#93370d
    7.51:1 AAA2.40:1 Fail
  • Aa
    yellow-900#7a2e0e
    9.43:1 AAA1.91:1 Fail
  • Aa
    yellow-950#4e1d09
    13.96:1 AAA1.29:1 Fail

Status: green

  • Aa
    green-25#f6fef9
    1.02:1 Fail17.63:1 AAA
  • Aa
    green-50#ecfdf3
    1.05:1 Fail17.15:1 AAA
  • Aa
    green-100#dcfae6
    1.11:1 Fail16.25:1 AAA
  • Aa
    green-200#abefc6
    1.32:1 Fail13.69:1 AAA
  • Aa
    green-300#75e0a7
    1.61:1 Fail11.18:1 AAA
  • Aa
    green-400#47cd89
    2.02:1 Fail8.92:1 AAA
  • Aa
    green-500#17b26a
    2.75:1 Fail6.56:1 AA
  • Aa
    green-600#079455
    3.90:1 Fail4.63:1 AA
  • Aa
    green-700#067647
    5.69:1 AA3.17:1 Fail
  • Aa
    green-800#085d3a
    7.96:1 AAA2.27:1 Fail
  • Aa
    green-900#074d31
    9.92:1 AAA1.82:1 Fail
  • Aa
    green-950#053321
    13.98:1 AAA1.29:1 Fail

Status: blue

  • Aa
    blue-25#f5faff
    1.04:1 Fail17.23:1 AAA
  • Aa
    blue-50#eff8ff
    1.07:1 Fail16.83:1 AAA
  • Aa
    blue-100#d1e9ff
    1.24:1 Fail14.48:1 AAA
  • Aa
    blue-200#b2ddff
    1.43:1 Fail12.64:1 AAA
  • Aa
    blue-300#84caff
    1.76:1 Fail10.23:1 AAA
  • Aa
    blue-400#53b1fd
    2.31:1 Fail7.82:1 AAA
  • Aa
    blue-500#2e90fa
    3.23:1 Fail5.58:1 AA
  • Aa
    blue-600#1570ef
    4.56:1 AA3.96:1 Fail
  • Aa
    blue-700#175cd3
    5.98:1 AA3.02:1 Fail
  • Aa
    blue-800#1849a9
    8.18:1 AAA2.21:1 Fail
  • Aa
    blue-900#194185
    9.83:1 AAA1.84:1 Fail
  • Aa
    blue-950#102a56
    14.11:1 AAA1.28:1 Fail

Each swatch shows the contrast of white (text-oncolor-primary, #ffffff) and of black (text-default, #161616) text on it. Translucent swatches are measured over white.

Alpha

Alpha: white

  • Aa
    alpha-alpha-white-10#ffffff1a
    1.00:1 Fail18.09:1 AAA
  • Aa
    alpha-alpha-white-20#ffffff33
    1.00:1 Fail18.09:1 AAA
  • Aa
    alpha-alpha-white-30#ffffff4d
    1.00:1 Fail18.09:1 AAA
  • Aa
    alpha-alpha-white-40#ffffff66
    1.00:1 Fail18.09:1 AAA
  • Aa
    alpha-alpha-white-50#ffffff80
    1.00:1 Fail18.09:1 AAA
  • Aa
    alpha-alpha-white-60#ffffff99
    1.00:1 Fail18.09:1 AAA
  • Aa
    alpha-alpha-white-70#ffffffb2
    1.00:1 Fail18.09:1 AAA
  • Aa
    alpha-alpha-white-80#ffffffcc
    1.00:1 Fail18.09:1 AAA
  • Aa
    alpha-alpha-white-90#ffffffe5
    1.00:1 Fail18.09:1 AAA
  • Aa
    alpha-alpha-white-100#ffffff
    1.00:1 Fail18.09:1 AAA
  • Aa
    alpha-alpha-white-0#ffffff00
    1.00:1 Fail18.09:1 AAA

Alpha: black

  • Aa
    alpha-alpha-black-10#1616161a
    1.23:1 Fail14.66:1 AAA
  • Aa
    alpha-alpha-black-20#16161633
    1.53:1 Fail11.77:1 AAA
  • Aa
    alpha-alpha-black-30#1616164d
    1.96:1 Fail9.18:1 AAA
  • Aa
    alpha-alpha-black-40#16161666
    2.55:1 Fail7.07:1 AAA
  • Aa
    alpha-alpha-black-50#16161680
    3.45:1 Fail5.24:1 AA
  • Aa
    alpha-alpha-black-60#16161699
    4.72:1 AA3.82:1 Fail
  • Aa
    alpha-alpha-black-70#161616b2
    6.65:1 AA2.72:1 Fail
  • Aa
    alpha-alpha-black-80#161616cc
    9.64:1 AAA1.87:1 Fail
  • Aa
    alpha-alpha-black-90#161616e5
    13.62:1 AAA1.32:1 Fail
  • Aa
    alpha-alpha-black-100#161616
    18.09:1 AAA1.00:1 Fail
  • Aa
    alpha-alpha-black-0#16161600
    1.00:1 Fail18.09:1 AAA

Alpha: primary

  • Aa
    alpha-alpha-600-primary-100#1b8354
    4.74:1 AA3.80:1 Fail
  • Aa
    alpha-alpha-600-primary-90#1b8354e5
    3.96:1 Fail4.56:1 AA
  • Aa
    alpha-alpha-600-primary-80#1b8354cc
    3.34:1 Fail5.41:1 AA
  • Aa
    alpha-alpha-600-primary-70#1b8354b2
    2.80:1 Fail6.44:1 AA
  • Aa
    alpha-alpha-600-primary-60#1b835499
    2.38:1 Fail7.58:1 AAA
  • Aa
    alpha-alpha-600-primary-50#1b835480
    2.03:1 Fail8.88:1 AAA
  • Aa
    alpha-alpha-600-primary-40#1b835466
    1.74:1 Fail10.39:1 AAA
  • Aa
    alpha-alpha-600-primary-30#1b83544d
    1.50:1 Fail12.01:1 AAA
  • Aa
    alpha-alpha-600-primary-20#1b835433
    1.30:1 Fail13.87:1 AAA
  • Aa
    alpha-alpha-600-primary-10#1b83541a
    1.14:1 Fail15.85:1 AAA
  • Aa
    primary-sa-flag-500-alpha-10#25935f19
    1.12:1 Fail16.13:1 AAA

Alpha: yellow

  • Aa
    alpha-alpha-yellow-10#dc68031a
    1.12:1 Fail16.08:1 AAA
  • Aa
    alpha-alpha-yellow-20#dc680333
    1.26:1 Fail14.31:1 AAA

Alpha: red

  • Aa
    alpha-alpha-red-10#d92d201a
    1.16:1 Fail15.50:1 AAA
  • Aa
    alpha-alpha-red-20#d92d2033
    1.36:1 Fail13.28:1 AAA

Alpha: blue

  • Aa
    alpha-alpha-blue-10#1570ef1a
    1.14:1 Fail15.80:1 AAA
  • Aa
    alpha-alpha-blue-20#1570ef33
    1.31:1 Fail13.79:1 AAA

Alpha: green

  • Aa
    alpha-alpha-green-10#0794551a
    1.13:1 Fail15.97:1 AAA
  • Aa
    alpha-alpha-green-20#07945533
    1.28:1 Fail14.11:1 AAA
  • Aa
    alpha-alpha-green-30#1b83544c
    1.49:1 Fail12.08:1 AAA
  • Aa
    alpha-alpha-green-40#1b835466
    1.74:1 Fail10.39:1 AAA
  • Aa
    alpha-alpha-green-50#1b83547f
    2.02:1 Fail8.93:1 AAA
  • Aa
    alpha-alpha-green-60#1b835499
    2.38:1 Fail7.58:1 AAA
  • Aa
    alpha-alpha-green-70#1b8354b2
    2.80:1 Fail6.44:1 AA
  • Aa
    alpha-alpha-green-80#1b8354cc
    3.34:1 Fail5.41:1 AA
  • Aa
    alpha-alpha-green-90#1b8354e5
    3.96:1 Fail4.56:1 AA
  • Aa
    alpha-alpha-green-100#1b8354
    4.74:1 AA3.80:1 Fail

Each swatch shows the contrast of white (text-oncolor-primary, #ffffff) and of black (text-default, #161616) text on it. Translucent swatches are measured over white.

Extended

These palettes ship with the design.dga.gov.sa CSS but are not in Figma. They are kept for compatibility.

Extended (site CSS only): green-light

  • Aa
    green-light-25#fafef5
    1.02:1 Fail17.71:1 AAA
  • Aa
    green-light-50#f3fee7
    1.04:1 Fail17.35:1 AAA
  • Aa
    green-light-100#e3fbcc
    1.10:1 Fail16.31:1 AAA
  • Aa
    green-light-200#d0f8ab
    1.18:1 Fail15.24:1 AAA
  • Aa
    green-light-300#a6ef67
    1.38:1 Fail13.06:1 AAA
  • Aa
    green-light-400#85e13a
    1.63:1 Fail11.05:1 AAA
  • Aa
    green-light-500#66c61c
    2.17:1 Fail8.32:1 AAA
  • Aa
    green-light-600#4ca30d
    3.20:1 Fail5.64:1 AA
  • Aa
    green-light-700#3b7c0f
    5.15:1 AA3.51:1 Fail
  • Aa
    green-light-800#326212
    7.26:1 AAA2.49:1 Fail
  • Aa
    green-light-900#2b5314
    8.93:1 AAA2.02:1 Fail
  • Aa
    green-light-950#15290a
    15.51:1 AAA1.16:1 Fail

Extended (site CSS only): blue-light

  • Aa
    blue-light-25#f5fbff
    1.04:1 Fail17.34:1 AAA
  • Aa
    blue-light-50#f0f9ff
    1.06:1 Fail16.97:1 AAA
  • Aa
    blue-light-100#e0f2fe
    1.14:1 Fail15.77:1 AAA
  • Aa
    blue-light-200#b9e6fe
    1.32:1 Fail13.62:1 AAA
  • Aa
    blue-light-300#7cd4fd
    1.65:1 Fail10.93:1 AAA
  • Aa
    blue-light-400#36bffa
    2.10:1 Fail8.60:1 AAA
  • Aa
    blue-light-500#0ba5ec
    2.76:1 Fail6.55:1 AA
  • Aa
    blue-light-600#0086c9
    3.99:1 Fail4.52:1 AA
  • Aa
    blue-light-700#026aa2
    5.85:1 AA3.09:1 Fail
  • Aa
    blue-light-800#065986
    7.55:1 AAA2.39:1 Fail
  • Aa
    blue-light-900#0b4a6f
    9.44:1 AAA1.91:1 Fail
  • Aa
    blue-light-950#062c41
    14.53:1 AAA1.24:1 Fail

Extended (site CSS only): blue-dark

  • Aa
    blue-dark-25#f5f8ff
    1.06:1 Fail17.02:1 AAA
  • Aa
    blue-dark-50#eff4ff
    1.10:1 Fail16.41:1 AAA
  • Aa
    blue-dark-100#d1e0ff
    1.32:1 Fail13.63:1 AAA
  • Aa
    blue-dark-200#b2ccff
    1.61:1 Fail11.18:1 AAA
  • Aa
    blue-dark-300#84adff
    2.23:1 Fail8.10:1 AAA
  • Aa
    blue-dark-400#528bff
    3.23:1 Fail5.59:1 AA
  • Aa
    blue-dark-500#2970ff
    4.32:1 Fail4.18:1 Fail
  • Aa
    blue-dark-600#155eef
    5.41:1 AA3.34:1 Fail
  • Aa
    blue-dark-700#004eeb
    6.38:1 AA2.83:1 Fail
  • Aa
    blue-dark-800#0040c1
    8.38:1 AAA2.15:1 Fail
  • Aa
    blue-dark-900#00359e
    10.48:1 AAA1.72:1 Fail
  • Aa
    blue-dark-950#002266
    14.78:1 AAA1.22:1 Fail

Extended (site CSS only): orange-dark

  • Aa
    orange-dark-25#fff9f5
    1.04:1 Fail17.33:1 AAA
  • Aa
    orange-dark-50#fff4ed
    1.08:1 Fail16.73:1 AAA
  • Aa
    orange-dark-100#ffe6d5
    1.19:1 Fail15.10:1 AAA
  • Aa
    orange-dark-200#ffd6ae
    1.35:1 Fail13.34:1 AAA
  • Aa
    orange-dark-300#ff9c66
    2.05:1 Fail8.78:1 AAA
  • Aa
    orange-dark-400#ff692e
    2.87:1 Fail6.30:1 AA
  • Aa
    orange-dark-500#ff4405
    3.45:1 Fail5.24:1 AA
  • Aa
    orange-dark-600#e62e05
    4.41:1 Fail4.09:1 Fail
  • Aa
    orange-dark-700#bc1b06
    6.36:1 AA2.84:1 Fail
  • Aa
    orange-dark-800#97180c
    8.56:1 AAA2.11:1 Fail
  • Aa
    orange-dark-900#771a0d
    10.83:1 AAA1.66:1 Fail
  • Aa
    orange-dark-950#57130a
    13.97:1 AAA1.29:1 Fail

Extended (site CSS only): orange

  • Aa
    orange-25#fefaf5
    1.03:1 Fail17.41:1 AAA
  • Aa
    orange-50#fef6ee
    1.06:1 Fail16.91:1 AAA
  • Aa
    orange-100#fdead7
    1.17:1 Fail15.44:1 AAA
  • Aa
    orange-200#f9dbaf
    1.33:1 Fail13.59:1 AAA
  • Aa
    orange-300#f7b27a
    1.80:1 Fail9.99:1 AAA
  • Aa
    orange-400#f38744
    2.51:1 Fail7.20:1 AAA
  • Aa
    orange-500#ef6820
    3.14:1 Fail5.74:1 AA
  • Aa
    orange-600#e04f16
    3.96:1 Fail4.56:1 AA
  • Aa
    orange-700#b93815
    5.77:1 AA3.13:1 Fail
  • Aa
    orange-800#932f19
    7.89:1 AAA2.29:1 Fail
  • Aa
    orange-900#772917
    9.93:1 AAA1.82:1 Fail
  • Aa
    orange-950#511c10
    13.78:1 AAA1.31:1 Fail

Each swatch shows the contrast of white (text-oncolor-primary, #ffffff) and of black (text-default, #161616) text on it. Translucent swatches are measured over white.

Edit this page on GitHub (opens in a new tab)