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

Joey Karczewski
July 3, 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!

Subscribe to get updates when we post
Thanks for subscribing!
Oops! Something went wrong while submitting the form.

Bold Tech were the right fit for TVadSync to accelerate our use of Retool platform. We had both user experience design needs as well as back end data design needs that were quickly resolved by the team. We will be using them for all Retool app development moving forward. Highly recommended.

Justin Gage Testimonial - Founder of Technically and Growth at Retool
Ronan Higgins, CEO

Bold Tech is a group of talented, capable developers who I regularly trust to help our customers build the apps they need, fast. Everyone I've put them in front of has given rave reviews!

Justin Gage Testimonial - Founder of Technically and Growth at Retool
Justin Gage, Growth