User-selectable colour scheme and font size

[DeliciousRoastPotato]

Description

Background

I'm training to be a teacher and while on placement I used Bookdown to organise my lesson plans. Next placement, I want to use it to have a student-facing website because html is better for accessibility than PDF.

One thing I liked about Bookdown was that the user could change the font size and book theme from a dropdown menu. Unfortunately, the themes provided had some accessibility issues surrounding colour contrast and hyperlink visibility.

I'm deciding between trying to fix the colour schemes for Bookdown or move over to Quarto with a preference for Quarto.

My question

If I move over to quarto, is there an equivalent functionality for user-adjustable font size and theme? All I have found so far is the ability to define a light mode and a dark mode for the website.

I suspect I'd need at least three themes:

• light mode, with WCAG compliant contrast ratios
• dark mode, with WCAG compliant contrast ratios
• a lower contrast mode. This would not comply with WCAG's colour contrast levels; however, the AAA standard for visual presentation notes that some users prefer reading text with low contrast ratios due to various conditions. This includes some users with dyslexia.

My current level of understanding

I'm not a programmer. I am unfamiliar with CSS but I should be able to change a value here and there if pointed in the right direction.

I have tried looking at the quarto website to find information. I have not found anything except the ability to define a dark mode for websites. I have also done some Google-ing, but have not found anything.

[cderv]

@DeliciousRoastPotato first can you edit the title of your discussion so that it get a real title, and not the default one as I suspect it is right now. thanks !

One thing I liked about Bookdown was that the user could change the font size and book theme from a dropdown menu.

Are you referring to the font setting and the menu at the top ? https://bookdown.org/yihui/bookdown/html.html

I don't think this is yet available on Quarto Book. You can change theme though and set dark mode yes. You can create your own theme or variation if what we offer is not enough. https://quarto.org/docs/output-formats/html-themes.html

[DeliciousRoastPotato]

Yes, that was definitely a cut and paste error. Thanks for pointing it out.

I'm unfortunately not at a stage in my programming skills to create a theme from scratch. At least not to do it in the available timeframe.

As such, it might be the case that Bookdown has more of what I need ready to go. I'll ask an analogous question over at Bookdown.

Notes on what I've found to handle this in Quarto:

Doing it in Bookdown doesn't pan out for whatever reason: a fall-back option might be that I ditch dark mode and use the dark mode setting for the low contrast. Having skimmed the quarto webpage, am I correct in understanding that I could do one of the following to avoid having to completely specify a theme:

Simpler

I could choose the default theme and overwrite it using the fields under 'basic options' for html theming in quarto. It's a bit janky and doesn't have all my desired features but would be doable.

More advanced

Create a SASS file to customise an existing theme. I can definitely do this given time but can see it'll take a bit more brain power.

[mcanouil]

Since themes included in Quarto are BootStrap, you can use any of Quarto/Bootstrap exposed variables as listed in:

• https://quarto.org/docs/output-formats/html-themes.html#sass-variables
• https://github.com/twbs/bootstrap/blob/main/scss/_variables.scss

[cderv]

I'm unfortunately not at a stage in my programming skills to create a theme from scratch. At least not to do it in the available timeframe.

Learning SCSS syntax is quite easy, especially is your know CSS. Also you don't need to create from scratch. You should just need to tweak what needs to be tweaked.

Use variables as pointed out above, and add some rules if needed and it should work ok.

We are also interested in feedback about how constrast is not good enough in the built in themes.

[DeliciousRoastPotato]

Thanks everyone. I'll need to get some assignments done this week so I may not get to it until next week. But, once I have time to read patiently, I should be able to give it a shot and report back. I'll give it a shot and report back.

Regarding colour contrast: have a look at this comment on WCAG accessibility and Bootstrap. They note that their colour theme provides insufficient colour contrast. Part of the issue would have to do with the large number of different coloured displays in the theme. It is likely the case that some subset of those colours works fine. I'll get more specific info when I've got time to collect it.