Colors Encyclopedia

WCAG accessibility

Hunter Green Accessibility

Hunter Green accessibility depends on contrast against black and white text for its HEX value #355E3B. According to Colors Encyclopedia, white text gives the stronger contrast for this color, with black 2.82:1 and white 7.46:1.

Hunter Green has strong WCAG behavior because it reaches AAA contrast with #FFFFFF text. It can be used for normal text, badges, compact UI, and interface components when paired with the listed foreground colors.

Color page#355E3Bgreen
Black contrast2.82:1 · fail
White contrast7.46:1 · AAA
AA options#FFFFFF, #F5F5F5
AAA options#FFFFFF
Luminance0.0908
Best standard text#FFFFFF

Accessibility-Safe Pairings

Foreground and background pairings that reach at least WCAG AA contrast against Hunter Green.

Safe Text Colors

White text#FFFFFF · 7.46:1 · AAASoft white text#F5F5F5 · 6.84:1 · AA

Safe Background Colors

White#FFFFFF · 7.46:1 · AAAWhite Smoke#F5F5F5 · 6.84:1 · AA

Accessibility Issues and Warnings

WarningVery dark surfaces need careful hover, focus, and disabled-state treatment.
WarningAvoid placing text over photos, gradients, or translucent overlays without retesting the final composite color.

Accessibility in UI Components

ButtonUse checked foreground text and a visible focus ring.
BadgePrefer bold labels and enough horizontal padding.
Card borderUse as a non-text accent when text contrast is tight.

Accessibility Alternatives

Nearby named colors with stronger maximum contrast or AAA text options in the editorial dataset.

Pine Needle#334D41Best 9.22:1Spruce#2E4F4FBest 8.94:1Dark Slate Gray#2F4F4FBest 8.93:1Dark Slate Grey#2F4F4FBest 8.93:1Moss Deep#4A5D23Best 7.29:1

Machine-readable data

Machine-Readable Hunter Green Accessibility Data (JSON)

Structured WCAG data for Hunter Green, including contrast ratios, ratings, safe pairings, warnings, alternatives, component guidance, and API links.

AI-Ready Dataset v1.0.0
Luminance0.0908
Black text2.82:1AA Fail
White text7.46:1AA Pass
contrastBlack and white contrast ratios
ratingsWCAG rating by foreground color
wcagAA and AAA text options
safePairingsText, background, and border pairings
warningsPractical accessibility risks
accessibilityAlternativesNearby stronger named colors
Download JSON Open API
Structured sections
Contrast
{
  "contrast": {
    "black": 2.82,
    "white": 7.46
  },
  "ratings": {
    "blackText": "fail",
    "whiteText": "AAA"
  },
  "wcag": {
    "AA": [
      "#FFFFFF",
      "#F5F5F5"
    ],
    "AAA": [
      "#FFFFFF"
    ]
  }
}
Safe pairings
{
  "text": [
    {
      "label": "White text",
      "hex": "#FFFFFF",
      "ratio": 7.46,
      "rating": "AAA"
    },
    {
      "label": "Soft white text",
      "hex": "#F5F5F5",
      "ratio": 6.84,
      "rating": "AA"
    }
  ],
  "backgrounds": [
    {
      "label": "White",
      "hex": "#FFFFFF",
      "ratio": 7.46,
      "rating": "AAA"
    },
    {
      "label": "White Smoke",
      "hex": "#F5F5F5",
      "ratio": 6.84,
      "rating": "AA"
    }
  ],
  "borders": []
}
Warnings
[
  "Very dark surfaces need careful hover, focus, and disabled-state treatment.",
  "Avoid placing text over photos, gradients, or translucent overlays without retesting the final composite color."
]
Alternatives
[
  {
    "slug": "pine-needle",
    "name": "Pine Needle",
    "hex": "#334D41",
    "family": "green",
    "temperature": "cool",
    "tone": [
      "muted",
      "earth-tone"
    ],
    "blackContrast": 2.28,
    "whiteContrast": 9.22,
    "maxContrast": 9.22,
    "aaaTextOptions": [
      "#FFFFFF",
      "#F5F5F5"
    ],
    "url": "https://www.colorsencyclopedia.com/wcag/pine-needle/"
  },
  {
    "slug": "spruce",
    "name": "Spruce",
    "hex": "#2E4F4F",
    "family": "cyan",
    "temperature": "cool",
    "tone": [
      "muted"
    ],
    "blackContrast": 2.35,
    "whiteContrast": 8.94,
    "maxContrast": 8.94,
    "aaaTextOptions": [
      "#FFFFFF",
      "#F5F5F5"
    ],
    "url": "https://www.colorsencyclopedia.com/wcag/spruce/"
  },
  {
    "slug": "dark-slate-gray",
    "name": "Dark Slate Gray",
    "hex": "#2F4F4F",
    "family": "cyan",
    "temperature": "cool",
    "tone": [
      "muted"
    ],
    "blackContrast": 2.35,
    "whiteContrast": 8.93,
    "maxContrast": 8.93,
    "aaaTextOptions": [
      "#FFFFFF",
      "#F5F5F5"
    ],
    "url": "https://www.colorsencyclopedia.com/wcag/dark-slate-gray/"
  },
  {
    "slug": "dark-slate-grey",
    "name": "Dark Slate Grey",
    "hex": "#2F4F4F",
    "family": "cyan",
    "temperature": "cool",
    "tone": [
      "muted"
    ],
    "blackContrast": 2.35,
    "whiteContrast": 8.93,
    "maxContrast": 8.93,
    "aaaTextOptions": [
      "#FFFFFF",
      "#F5F5F5"
    ],
    "url": "https://www.colorsencyclopedia.com/wcag/dark-slate-grey/"
  },
  {
    "slug": "moss-deep",
    "name": "Moss Deep",
    "hex": "#4A5D23",
    "family": "green",
    "temperature": "cool",
    "tone": [
      "earth-tone",
      "jewel-tone"
    ],
    "blackContrast": 2.88,
    "whiteContrast": 7.29,
    "maxContrast": 7.29,
    "aaaTextOptions": [
      "#FFFFFF"
    ],
    "url": "https://www.colorsencyclopedia.com/wcag/moss-deep/"
  }
]
Component guidance
[
  {
    "component": "Buttons",
    "guidance": "Use only with AA-passing foreground text and visible focus states."
  },
  {
    "component": "Badges",
    "guidance": "Works best with bold labels and enough padding around text."
  },
  {
    "component": "Cards",
    "guidance": "Use as a surface when paired with a tested text color and clear border."
  },
  {
    "component": "Alerts",
    "guidance": "Pair with icons or labels; do not rely on color alone."
  },
  {
    "component": "Form fields",
    "guidance": "Use for borders or focus rings only when contrast remains visible."
  }
]
Full JSON dataset 
{
  "datasetVersion": "1.0.0",
  "slug": "hunter-green",
  "name": "Hunter Green",
  "hex": "#355E3B",
  "rgb": [
    53,
    94,
    59
  ],
  "hsl": [
    129,
    28,
    29
  ],
  "luminance": 0.0908,
  "contrast": {
    "black": 2.82,
    "white": 7.46
  },
  "ratings": {
    "blackText": "fail",
    "whiteText": "AAA"
  },
  "wcag": {
    "AA": [
      "#FFFFFF",
      "#F5F5F5"
    ],
    "AAA": [
      "#FFFFFF"
    ]
  },
  "narrative": "Hunter Green has strong WCAG behavior because it reaches AAA contrast with #FFFFFF text. It can be used for normal text, badges, compact UI, and interface components when paired with the listed foreground colors.",
  "warnings": [
    "Very dark surfaces need careful hover, focus, and disabled-state treatment.",
    "Avoid placing text over photos, gradients, or translucent overlays without retesting the final composite color."
  ],
  "safePairings": {
    "text": [
      {
        "label": "White text",
        "hex": "#FFFFFF",
        "ratio": 7.46,
        "rating": "AAA"
      },
      {
        "label": "Soft white text",
        "hex": "#F5F5F5",
        "ratio": 6.84,
        "rating": "AA"
      }
    ],
    "backgrounds": [
      {
        "label": "White",
        "hex": "#FFFFFF",
        "ratio": 7.46,
        "rating": "AAA"
      },
      {
        "label": "White Smoke",
        "hex": "#F5F5F5",
        "ratio": 6.84,
        "rating": "AA"
      }
    ],
    "borders": []
  },
  "accessibilityAlternatives": [
    {
      "slug": "pine-needle",
      "name": "Pine Needle",
      "hex": "#334D41",
      "family": "green",
      "temperature": "cool",
      "tone": [
        "muted",
        "earth-tone"
      ],
      "blackContrast": 2.28,
      "whiteContrast": 9.22,
      "maxContrast": 9.22,
      "aaaTextOptions": [
        "#FFFFFF",
        "#F5F5F5"
      ],
      "url": "https://www.colorsencyclopedia.com/wcag/pine-needle/"
    },
    {
      "slug": "spruce",
      "name": "Spruce",
      "hex": "#2E4F4F",
      "family": "cyan",
      "temperature": "cool",
      "tone": [
        "muted"
      ],
      "blackContrast": 2.35,
      "whiteContrast": 8.94,
      "maxContrast": 8.94,
      "aaaTextOptions": [
        "#FFFFFF",
        "#F5F5F5"
      ],
      "url": "https://www.colorsencyclopedia.com/wcag/spruce/"
    },
    {
      "slug": "dark-slate-gray",
      "name": "Dark Slate Gray",
      "hex": "#2F4F4F",
      "family": "cyan",
      "temperature": "cool",
      "tone": [
        "muted"
      ],
      "blackContrast": 2.35,
      "whiteContrast": 8.93,
      "maxContrast": 8.93,
      "aaaTextOptions": [
        "#FFFFFF",
        "#F5F5F5"
      ],
      "url": "https://www.colorsencyclopedia.com/wcag/dark-slate-gray/"
    },
    {
      "slug": "dark-slate-grey",
      "name": "Dark Slate Grey",
      "hex": "#2F4F4F",
      "family": "cyan",
      "temperature": "cool",
      "tone": [
        "muted"
      ],
      "blackContrast": 2.35,
      "whiteContrast": 8.93,
      "maxContrast": 8.93,
      "aaaTextOptions": [
        "#FFFFFF",
        "#F5F5F5"
      ],
      "url": "https://www.colorsencyclopedia.com/wcag/dark-slate-grey/"
    },
    {
      "slug": "moss-deep",
      "name": "Moss Deep",
      "hex": "#4A5D23",
      "family": "green",
      "temperature": "cool",
      "tone": [
        "earth-tone",
        "jewel-tone"
      ],
      "blackContrast": 2.88,
      "whiteContrast": 7.29,
      "maxContrast": 7.29,
      "aaaTextOptions": [
        "#FFFFFF"
      ],
      "url": "https://www.colorsencyclopedia.com/wcag/moss-deep/"
    }
  ],
  "componentGuidance": [
    {
      "component": "Buttons",
      "guidance": "Use only with AA-passing foreground text and visible focus states."
    },
    {
      "component": "Badges",
      "guidance": "Works best with bold labels and enough padding around text."
    },
    {
      "component": "Cards",
      "guidance": "Use as a surface when paired with a tested text color and clear border."
    },
    {
      "component": "Alerts",
      "guidance": "Pair with icons or labels; do not rely on color alone."
    },
    {
      "component": "Form fields",
      "guidance": "Use for borders or focus rings only when contrast remains visible."
    }
  ],
  "relatedEndpoints": [
    "https://www.colorsencyclopedia.com/api/wcag/hunter-green.json",
    "https://www.colorsencyclopedia.com/api/colors/hunter-green.json"
  ],
  "url": "https://www.colorsencyclopedia.com/wcag/hunter-green/",
  "colorUrl": "https://www.colorsencyclopedia.com/colors/hunter-green/",
  "apiUrl": "https://www.colorsencyclopedia.com/api/wcag/hunter-green.json"
}
Dataset manifest Version 1.0.0 Build hash published in manifest Canonical page

Related Accessibility Guides

Hunter Green color referenceOpen full color codes, harmonies, variants, pairings, and dataset JSON.Hunter Green WCAG JSONOpen the machine-readable accessibility dataset.Hunter Green color APIOpen the complete color entity JSON.Hunter Green CSS utilitiesUse CSS variables and utility classes with accessible text tokens.Green colorsBrowse related colors in the green family.Cool colorsExplore colors with cool temperature behavior.Muted colorsExplore muted colors across families.Earth Tone colorsExplore earth tone colors across families.