Hackathon Submission: User-Defined Settings for Accessibility in Retool (First Place)

Joey Karczewski
November 25, 2021


Accessibility Settings in Retool
Looking to make your Retool app more accessible? In this walk-through we show you how our User-defined Accessibility Settings module works, as part of Bold Tech's submission to the Retool Productivity Hackathon.

This module gives you the ability to change font size, line height, letter spacing, font and even background color to make your app more suitable for varying needs. What makes this module even more special is that this doesn't affect the Retool environment for all users, but changes the CSS settings for the current user ONLY. It does this by saving these preferences to a separate database and pulling them each time that individual logs into their app in Retool. This means that each individual user of an app can customize their own settings for the app, and these settings are automatically applied for each app session. To save you guys some time, we've made this into a module which you can download and install into your apps: just download the JSON, upload it to your Retool account. Then, duplicate our database, add it to your and connect it to your database (you can make a copy of our database in this folder). Download everything you need here: https://cutt.ly/cn2wfXR. Note: To connect the contrast mode, you need to use this code in the value box for the background color setting for each component: {{toggle2.value == false ? "" : toggle1.value == true ? "#FFFFE5" : "#FFFFF"}}

This principle can be used in many different ways, to create customizable layout changes, dynamic tables and more - each controlled by the individual end-user to make sure their work is as productive as possible! Keep an eye on https://www.boldtech.dev/tutorials for a tutorial on this coming soon, as well as a full walk-through of how to build the accessibility module from scratch. Got any questions or even ideas for more tutorials to cover in Retool? Shoot me an email at sophie@boldtech.dev and let's have a chat!