a11y-syntax-highlighting

    0.2.0 • Public • Published

    a11y-syntax-highlighting

    Accessible light and dark syntax highlighting themes.

    Support

    Libraries

    Applications

    Misc

    • Carbon
    • JSON (remember to include alt text with your image!)

    Roadmap

    Themes

    a11y-dark

    The a11y-dark theme being applied to the HTML of the Prism.js website. Screenshot.

    • Light text on a dark background.
    • Background color of #2b2b2b.
    • WCAG AAA compliant for color contrast.
    Color Hex Ratio Normal Text Large Text
    Bright Turquoise #00e0e0 8.59:1 AAA AAA
    Chino #d4d0ab 9.04:1 AAA AAA
    Conifer #abe338 9.29:1 AAA AAA
    Gold #ffd700 10.09:1 AAA AAA
    Snuff #dcc6e0 8.90:1 AAA AAA
    Spring Wood #f8f8f2 13.28:1 AAA AAA
    Vivid Tangerine #ffa07a 7.12:1 AAA AAA

    a11y-light

    The a11y-light theme being applied to the HTML of the Prism.js website. Screenshot.

    • Dark text on a light background.
    • Background color of #fefefe.
    • WCAG AA compliant for color contrast. WCAG AAA compliance forces the values on a light background to be too similar to each other to be used effectively for syntax highlighting.
    Color Hex Ratio Normal Text Large Text
    Chelsea Gem #aa5d00 4.87:1 AA AAA
    Allports #007299 4.51:1 AA AAA
    Dove Gray #696969 5.44:1 AA AAA
    Emperor #545454 7.51:1 AAA AAA
    Japanese Laurel #008000 5.09:1 AA AAA
    Thunderbird #d91e18 5.02:1 AA AAA

    High Contrast Mode

    Both themes have enhanced support for Windows High Contrast Mode when possible:

    The a11y-dark theme responding to Windows High Contrast Mode. Screenshot.

    Used by

    Run across it being used elsewhere? Let me know!

    Thanks

    Install

    npm i a11y-syntax-highlighting

    DownloadsWeekly Downloads

    17

    Version

    0.2.0

    License

    MIT

    Unpacked Size

    54.7 kB

    Total Files

    22

    Last publish

    Collaborators

    • ericwbailey