{
  "id": 19551283,
  "title": "Stop Guessing Text Colors. Chrome DevTools Can Pick an Accessible One for You",
  "url": "https://urgent.news/2026/11/11/stop-guessing-text-colors-chrome-devtools-can-pick-an-accessible-one",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-11-11T21:07:08.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/8bitenterprise/stop-guessing-text-colors-chrome-devtools-can-pick-an-accessible-one-for-you-38b9"
  },
  "original_language": "en",
  "account": "Choosing accessible text colors can be a challenge, especially when it seems to look fine on your screen. Yet, this is one of the most prevalent accessibility issues on the web. Fortunately, Google's Chrome DevTools can automatically suggest an accessible color for you.\n\nThe Web Content Accessibility Guidelines (WCAG) measure contrast through a ratio between text color and background. For normal text, the standard is 4.5:1, while large text should meet a minimum of 3:1.\n\nUsing Chrome DevTools is straightforward. First, inspect the text element. A contrast ratio will then appear in the tooltip, signaling if it's too low. Next, open the color picker in the Styles pane. Here, you can see the current ratio and whether it meets the AA or AAA standards. Drag the shade area of the picker to reach the required contrast level. Alternatively, click 'Use suggested color' for DevTools to apply an appropriate color. Remember, these changes are temporary.\n\nIn the latest update of Chrome's DevTools (November 2026), two new features were introduced: APCA suggestions for light text on dark backgrounds, specifically addressing dark mode issues, and automatically converting out-of-gamut colors to oklab() and oklch() without producing NaN values.\n\nWhen switching themes, it's crucial to run the contrast check again, as contrast doesn't carry over automatically. Both light and dark modes require their own contrast checks.\n\nFor developers generating colors or building design systems, you can automatically test contrast using JavaScript. By implementing the WCAG formula, you can detect failing colors before they become part of your shipped product.",
  "summary": "Light grey text on white looks clean in a design file. It's also one of the most common accessibility failures on the web, and it's easy to miss because it looks fine on your own bright screen. Here's the thing: you don't need to guess a darker shade. Chrome DevTools will measure the contrast and suggest a color that passes. The numbers you're aiming for WCAG, the standard most accessibility…",
  "key_points": [
    "Chrome DevTools suggests accessible text colors",
    "WCAG contrast ratio 4.5:1 for normal text",
    "DevTools applies suggested color automatically"
  ],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}