Skip to content
Platform Codeالعربية

Colors

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

Version 0.2.0 ·

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
Direction
Theme
Viewport
Status colours and fills
Direction
Theme
Viewport

The dark theme has its own page: Dark mode explains the rules and shows Button, Badge, Tag, Link and status surfaces in both modes side by side.

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
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 449 tokens

  • --text-primaryText/text-primary
    text-primarychanged
    Light
    #1b8354colors-primary-sa-flag-600-primary4.53:1 AA
    Dark
    #88d8adcolors-primary-sa-flag-3008.74:1 AAA
  • --text-displayText/text-display
    text-displaychanged
    Light
    #1f2a37colors-neutral-80013.91:1 AAA
    Dark
    #f0f5f3colors-neutral-dark-5015.87:1 AAA
  • --text-primary-paragraphText/text-primary-paragraph
    text-primary-paragraphchanged
    Light
    #384250colors-neutral-7009.73:1 AAA
    Dark
    #d0d8d5colors-neutral-dark-20012.04:1 AAA
  • --text-secondary-paragraphText/text-secondary-paragraph
    text-secondary-paragraphchanged
    Light
    #6c737fcolors-neutral-5004.57:1 AA
    Dark
    #b6c0bdcolors-neutral-dark-3009.38:1 AAA
  • --text-successText/text-success
    text-successchanged
    Light
    #067647colors-green-7005.39:1 AA
    Dark
    #75e0a7colors-green-3009.08:1 AAA
  • --text-infoText/text-info
    text-infochanged
    Light
    #175cd3colors-blue-7005.57:1 AA
    Dark
    #84caffcolors-blue-3008.53:1 AAA
  • --text-warningText/text-warning
    text-warningchanged
    Light
    #b54708colors-yellow-7005.19:1 AA
    Dark
    #fec84bcolors-yellow-3009.75:1 AAA
  • --text-errorText/text-error
    text-errorchanged
    Light
    #b42318colors-red-7006.04:1 AA
    Dark
    #fda29bcolors-red-3007.94:1 AAA
  • --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-defaultchanged
    Light
    #161616colors-base-black17.31:1 AAA
    Dark
    #f0f5f3colors-neutral-dark-5015.87:1 AAA
  • --text-form-titleForm/text-form-title
    text-form-title
    Light
    #161616text-default17.31:1 AAA
    Dark
    #f0f5f3text-default15.87:1 AAA
  • --text-form-paragraphForm/text-form-paragraph
    text-form-paragraph
    Light
    #6c737ftext-secondary-paragraph4.57:1 AA
    Dark
    #b6c0bdtext-secondary-paragraph9.38:1 AAA
  • --text-default-disabledGlobal/text-default-disabled
    text-default-disabledchanged
    Light
    #9da4aecolors-neutral-400
    Dark
    #939e9acolors-neutral-dark-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-lightchanged
    Light
    #88d8adcolors-primary-sa-flag-3005.08:1 AA
    Dark
    #88d8adcolors-primary-sa-flag-30010.38:1 AAA
  • --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-10015.38: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
    #f7d54dcolors-secondary-gold-40012.14:1 AAA
  • --text-tertiary
    text-tertiarychangedsite CSS only
    Light
    #80519fcolors-tertiary-lavender-500-primary5.58:1 AA
    Dark
    #ccadd9colors-tertiary-lavender-3008.78:1 AAA
  • --text-secondary-light
    text-secondary-lightsite CSS only
    Light
    #fae996colors-secondary-gold-3006.99:1 AA
    Dark
    #fae996colors-secondary-gold-30014.29:1 AAA
  • --text-tertiary-light
    text-tertiary-lightchangedsite CSS only
    Light
    #e1cce8colors-tertiary-lavender-2005.70:1 AA
    Dark
    #ccadd9colors-tertiary-lavender-3008.78:1 AAA
  • --text-on-gold
    text-on-goldchangedPlatform Code
    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. Platform Code 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-50Light: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

Neutral, dark mode (Platform Code, green-tinted)

  • Aa
    neutral-dark-25#f8fbfa
    1.04:1 Fail17.38:1 AAA
  • Aa
    neutral-dark-50#f0f5f3
    1.10:1 Fail16.42:1 AAA
  • Aa
    neutral-dark-100#e4ebe9
    1.20:1 Fail14.95:1 AAA
  • Aa
    neutral-dark-200#d0d8d5
    1.45:1 Fail12.46:1 AAA
  • Aa
    neutral-dark-300#b6c0bd
    1.86:1 Fail9.70:1 AAA
  • Aa
    neutral-dark-400#939e9a
    2.76:1 Fail6.54:1 AA
  • Aa
    neutral-dark-500#6c7873
    4.59:1 AA3.93:1 Fail
  • Aa
    neutral-dark-600#4a5651
    7.66:1 AAA2.36:1 Fail
  • Aa
    neutral-dark-700#37413d
    10.57:1 AAA1.71:1 Fail
  • Aa
    neutral-dark-800#242e2a
    14.00:1 AAA1.29:1 Fail
  • Aa
    neutral-dark-850#1b2421
    15.89:1 AAA1.13:1 Fail
  • Aa
    neutral-dark-900#141b19
    17.49:1 AAA1.03:1 Fail
  • Aa
    neutral-dark-950#0d1311
    18.77:1 AAA1.03: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.