Code Text Color Recommendations

[ang-twilio]

Hi all,
I have a code block in one of my designs and I'm wondering if there are text colors I can use for differentiating parts of the code.

[TheSisb]

Hi @ang-twilio!

We don't currently have any guidance around syntax highlighting code blocks. For the most part, folks can copy and paste the code into an editor if they need syntax highlighting.

In general our recommendations are:

• Make sure the text color has a color contrast ratio of 4.5:1 to the background color of the code block
• Use a monospace font; ideally the one that matches your current theme (https://paste.twilio.design/getting-started/design/#fira-mono)
• Make sure the font is legible, not too small and a healthy line-height. (at your discretion)
• Make sure the code is highlightable and copiable (the default behavior unless you go out of your way to disable it)
• (Optional): Add an accessible Copy button

Specifically related to your screenshot, I would add that:

• The colors don't seem to pass 4.5:1 (namely, the comments)
• The choice of blue looks vaguely similar to our link blue, which may give the impression that it is interactive. I'd advise trying an alternate color. Feel free to test that with customers as well!

Hope this helps!

[ang-twilio]

Gotcha! Thanks for your response. Yeah the current blue was just a stand-in so I will change that. I'll look to our Twilio docs as well for some potential options. I'll ensure the colors have a ratio of 4.5:1.