https://github.com/phun-ky/vscode-accessible-theme
A pair of accessible, high-contrast VS Code themes designed for readability, clarity, and reduced eye strain. This theme family includes both Dark and Light variants, tuned for WCAG AA accessibility. Based on the article A pair of accessible, high-contrast VS Code themes designed for readability, clarity, and reduced eye strain.
https://github.com/phun-ky/vscode-accessible-theme
a11y aa accessibility accessible syntax-highlighting theme vscode wcag
Last synced: 5 months ago
JSON representation
A pair of accessible, high-contrast VS Code themes designed for readability, clarity, and reduced eye strain. This theme family includes both Dark and Light variants, tuned for WCAG AA accessibility. Based on the article A pair of accessible, high-contrast VS Code themes designed for readability, clarity, and reduced eye strain.
- Host: GitHub
- URL: https://github.com/phun-ky/vscode-accessible-theme
- Owner: phun-ky
- License: mit
- Created: 2025-08-17T17:36:46.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2026-02-02T13:14:33.000Z (5 months ago)
- Last Synced: 2026-02-07T19:36:08.523Z (5 months ago)
- Topics: a11y, aa, accessibility, accessible, syntax-highlighting, theme, vscode, wcag
- Language: JavaScript
- Homepage: https://marketplace.visualstudio.com/items?itemName=phun-ky.vscode-accessible-theme
- Size: 2.87 MB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Accessible (AA) Theme
A pair of **accessible, high-contrast VS Code themes** designed for readability,
clarity, and reduced eye strain. This theme family includes both **Dark** and
**Light** variants, tuned for **WCAG AA accessibility**. Based on the article
[Accessible syntax highlight theme](https://phun-ky.net/2023/10/06/accessible-syntax-highlight-theme).
[](http://commitizen.github.io/cz-cli/)
[](http://makeapullrequest.com)
[](http://semver.org/spec/v2.0.0.html)
## Table of Contents
- [Features](#features)
- [Palette](#palette)
- [Installation](#installation)
- [Usage](#usage)
- [Accessibility](#accessibility)
- [Recommended fonts to be used with this theme:](#recommended-fonts-to-be-used-with-this-theme)
- [Contributing](#contributing)
- [License](#license)
- [Changelog](#changelog)
- [Sponsor me](#sponsor-me)
## Features
- Carefully balanced color palette with consistent contrasts
- Distinct hues for:
- Keywords, variables, constants, and operators
- Brackets, parentheses, and punctuation
- Functions, methods, and object properties
- Classes, types, and module references
- Strings, numbers, symbols, and regex
- Markdown support (headings, code blocks, links, emphasis)
- Git status decorations and terminal ANSI colors
- WCAG AA contrast ratio for editor and UI elements
- Bracket pair highlighting colors optimized for quick scanning
## Palette
Core colors used across both dark and light variants, UI colors are derived from
these:
**With dark background: Sky Captain - `#262831`**:
| Color | Hex | Ratio | Normal Text | Large Text |
| ---------------- | --------- | ------- | ----------- | ---------- |
| Arona | `#859BA3` | 5.04:1 | AA | AAA |
| Vivid Amber | `#C79500` | 5.4:1 | AA | AAA |
| Sea Kale | `#2CAAA0` | 5.14:1 | AA | AAA |
| Flax Flower Blue | `#469EDD` | 5.03:1 | AA | AAA |
| Boredom | `#8C9B9B` | 5.08:1 | AA | AAA |
| Lilac Mist | `#E4E4E7` | 11.57:1 | AAA | AAA |
| Pompelmo | `#FF6666` | 5.13:1 | AA | AAA |
**With dark background: Gram's Hair - `#F5F6F7`**:
| Color | Hex | Ratio | Normal Text | Large Text |
| ------------- | --------- | ------ | ----------- | ---------- |
| Distance | `#566D71` | 5.07:1 | AA | AAA |
| Ground Earth | `#806200` | 5.29:1 | AA | AAA |
| Advantageous | `#1E766D` | 5.07:1 | AA | AAA |
| Jazz Blue | `#1D699F` | 5.43:1 | AA | AAA |
| Windsurfing | `#366E96` | 5.43:1 | AA | AAA |
| Mountain Pass | `#5C6A6A` | 5.21:1 | AA | AAA |
| Black | `#000000` | 19.4:1 | AAA | AAA |
| Pepper Jelly | `#C92243` | 5.11:1 | AA | AAA |
## Installation
1. Open **Extensions** in VS Code (`Ctrl+Shift+X` / `⌘+Shift+X`)
2. Search for **Accessible (AA) Themes**
3. Install and select either:
- **Accessible (AA) Dark**
- **Accessible (AA) Light**
## Usage
Once installed, open the **Command Palette** (`Ctrl+Shift+P` / `⌘+Shift+P`) and
run: `Preferences: Color Theme`
Select **Accessible (AA) Dark** or **Accessible (AA) Light**.
## Accessibility
- Meets **WCAG AA contrast standards** for text and UI (UI to be tested, stay
tuned!)
- Designed to be legible for long coding sessions
- Balanced bracket colors for better nesting visibility
- Comments are distinguishable without being distracting
## Recommended fonts to be used with this theme:
```
Menlo for Powerline, Menlo, Consolas, DejaVu Sans Mono, 'Droid Sans Mono', 'monospace', monospace
```
## Contributing
Want to contribute? Please read the
[CONTRIBUTING.md](https://github.com/phun-ky/vscode-accessible-theme/blob/main/CONTRIBUTING.md)
and
[CODE_OF_CONDUCT.md](https://github.com/phun-ky/vscode-accessible-theme/blob/main/CODE_OF_CONDUCT.md)
## License
This project is licensed under the MIT License - see the
[LICENSE](https://github.com/phun-ky/vscode-accessible-theme/blob/main/LICENSE)
file for details.
## Changelog
See the
[CHANGELOG.md](https://github.com/phun-ky/vscode-accessible-theme/blob/main/CHANGELOG.md)
for details on the latest updates.
## Sponsor me
I'm an Open Source evangelist, creating stuff that does not exist yet to help
get rid of secondary activities and to enhance systems already in place, be it
documentation or web sites.
The sponsorship is an unique opportunity to alleviate more hours for me to
maintain my projects, create new ones and contribute to the large community
we're all part of :)
[Support me on GitHub Sponsors](https://github.com/sponsors/phun-ky).
p.s. **Ukraine is still under brutal Russian invasion. A lot of Ukrainian people
are hurt, without shelter and need help**. You can help in various ways, for
instance, directly helping refugees, spreading awareness, putting pressure on
your local government or companies. You can also support Ukraine by donating
e.g. to [Red Cross](https://www.icrc.org/en/donate/ukraine),
[Ukraine humanitarian organisation](https://savelife.in.ua/en/donate-en/#donate-army-card-weekly)
or
[donate Ambulances for Ukraine](https://www.gofundme.com/f/help-to-save-the-lives-of-civilians-in-a-war-zone).