wordle_accessibility.js

wordle_accessibility.js

(function () {
  const style = document.createElement('style');
  style.textContent = `
    /* Ensure we have an anchor for the badge */
    [data-state="correct"],
    [data-state="present"],
    [data-state="absent"] {
      position: relative !important;
    }
    /* Common badge styling */
    [data-state="correct"]::after,
    [data-state="present"]::after,
    [data-state="absent"]::after {
      position: absolute;
      right: 6px;
      bottom: 4px;
      font-size: 1.3rem;
      font-weight: 900;
      line-height: 1;
      color: white;
      pointer-events: none;
      text-shadow: 0 1px 2px rgba(0,0,0,0.35); /* improves contrast on lighter tiles */
    }
    /* Symbols */
    [data-state="correct"]::after { content: "✓"; }
    [data-state="present"]::after { content: "•"; font-size: 1.6rem; } /* dot needs to be slightly larger */
    [data-state="absent"]::after  { content: "×"; }
  `;
  document.head.appendChild(style);
  document.title = "Wordle (color patched)";
})();

This gist improves Wordle’s accessibility for people with color‑vision differences by adding symbol annotations that indicate “correct,” “present,” or “absent” guesses.

To test:

1. In your browser, navigate to https://www.nytimes.com/games/wordle/index.html
2. Press F12 to toggle debug tools
3. Copy and paste the wordle_accessible.js script into the debug console window
4. The Wordle has now been patched

To create a bookmark:

1. Open Bookmark Manager and Add page ...
2. Name your bookmark e.g. "Wordle color patch"
3. Type "javascript:" and paste the script to the right of it, it should look something like:

javascript:(()=>{const e=document.createElement("style");e.textContent='[data-state="correct"],[data-state="present"],[data-state="absent"]{position:relative!important}[data-state="correct"]::after,[data-state="present"]::after,[data-state="absent"]::after{position:absolute;right:6px;bottom:4px;font-size:1.3rem;font-weight:900;line-height:1;color:#fff;pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,.35)}[data-state="correct"]::after{content:"✓"}[data-state="present"]::after{content:"•";font-size:1.6rem}[data-state="absent"]::after{content:"×"}';document.head.appendChild(e),document.title="Wordle (color patched)";})();

4. Save the bookmark and use it whenever you visit the Wordle page