News

How Apple is making sure Liquid Glass as legible as possible

Apple has shared a ton of resources for the new design language, these are the key takeaways

The biggest story of WWDC 25 is undeniably the new Liquid Glass design. Not only is it interesting because it finally unifies all of Apple’s software stacks, but it also adds a new level of joyful interaction with the software.

There’s a lot to unpack, but the thing I’ve seen people questioning the most is the legibility of the new design.Ā In the Apple developer video titledĀ Meet Liquid Glass, this is addressed, and there are still lots of accessibility options that can be applied to the new design to increase legibility and contrast. That being said, Liquid Glass comes alive in motion, so static screenshots don’t tell the complete story.

Anyways, back to what was shared in the presentation. The first is that at a base level, Apple only wants designers to use Liquid Glass elements sparingly and mostly for buttons in the navigation layer of an app or key actions like a buy button on a shopping app. So don’t expect the whole interface to be filled with glass elements. When used correctly, it’s more of an accent to most apps.

Beyond that, Liquid Glass is also a design element that can be read by Apple’s OS frameworks. This means that once a designer makes a glass element, it will be given the same glass properties as all of the other Liquid Glass elements. Therefore, all glass elements can actively add drop shadows, brighten, or even change their tint and dynamic range to make sure the buttons are as readable as possible.

For example, when you’re scrolling and a Liquid Glass button goes over text, it will automatically apply a subtle shadow to increase the separation between the element and the content. It can also independently switch between light and dark modes on the fly to make sure buttons don’t get lost as users move through lots of different content.

A large menu using Lquid glass

As buttons expand to a larger size, they also change to simulate thicker glass. It will then cast deeper shadows, as well as having more pronounced lensing and refraction effects. It also has a softer scattering of light through it having a slightly more frosted look than the smaller buttons.

Apple Liquid Glass acessability options

Top right: Standard, top left: Reduced Transparency, Bottom left: Increased Contrast, Bottom right: Decreased Motion.

That’s all built into Liquid Glass from the ground up to make sure it’s still functional, but people who still find it illegible can turn on a few accessibility settings to really make it more readable. Ā Reduced Transparency, Increased Contrast, and Reduced Motion are all in the ‘Accessibility’ section of the settings app and can be used to tweak Liquid Glass to your liking.

Source: Apple

MobileSyrup may earn a commission from purchases made via our links, which helps fund the journalism we provide free on our website. These links do not influence our editorial content. Support us here.

Related Articles

Fatal error: Uncaught Aws\S3\Exception\PermanentRedirectException: Encountered a permanent redirect while requesting https://ms-staging-baselayer-static-assets.s3.ca-central-1.amazonaws.com/?list-type=2&delimiter=%2F&prefix=uploads%2Fwpcf7_uploads%2F. Are you sure you are using the correct region for this bucket? in /var/www/html/vendor/aws/aws-sdk-php/src/S3/PermanentRedirectMiddleware.php:49 Stack trace: #0 /var/www/html/vendor/guzzlehttp/promises/src/Promise.php(209): Aws\S3\PermanentRedirectMiddleware->Aws\S3\{closure}(Object(Aws\Result)) #1 /var/www/html/vendor/guzzlehttp/promises/src/Promise.php(158): GuzzleHttp\Promise\Promise::callHandler(1, Object(Aws\Result), NULL) #2 /var/www/html/vendor/guzzlehttp/promises/src/TaskQueue.php(52): GuzzleHttp\Promise\Promise::GuzzleHttp\Promise\{closure}() #3 /var/www/html/vendor/guzzlehttp/guzzle/src/Handler/CurlMultiHandler.php(163): GuzzleHttp\Promise\TaskQueue->run() #4 /var/www/html/vendor/guzzlehttp/guzzle/src/Handler/CurlMultiHandler.php(189): GuzzleHttp\Handler\CurlMultiHandler->tick() #5 /var/www/html/vendor/guzzlehttp/promises/src/Promise.php(251): GuzzleHttp\Handler\CurlMultiHandler->execute(true) #6 /var/www/html/vendor/guzzlehttp/promises/src/Promise.php(227): GuzzleHttp\Promise\Promise->invokeWaitFn() #7 /var/www/html/vendor/guzzlehttp/promises/src/Promise.php(272): GuzzleHttp\Promise\Promise->waitIfPending() #8 /var/www/html/vendor/guzzlehttp/promises/src/Promise.php(229): GuzzleHttp\Promise\Promise->invokeWaitList() #9 /var/www/html/vendor/guzzlehttp/promises/src/Promise.php(272): GuzzleHttp\Promise\Promise->waitIfPending() #10 /var/www/html/vendor/guzzlehttp/promises/src/Promise.php(229): GuzzleHttp\Promise\Promise->invokeWaitList() #11 /var/www/html/vendor/guzzlehttp/promises/src/Promise.php(69): GuzzleHttp\Promise\Promise->waitIfPending() #12 /var/www/html/vendor/aws/aws-sdk-php/src/AwsClientTrait.php(58): GuzzleHttp\Promise\Promise->wait() #13 /var/www/html/vendor/aws/aws-sdk-php/src/ResultPaginator.php(151): Aws\AwsClient->execute(Object(Aws\Command)) #14 /var/www/html/vendor/aws/aws-sdk-php/src/functions.php(52): Aws\ResultPaginator->valid() #15 /var/www/html/vendor/aws/aws-sdk-php/src/functions.php(69): Aws\map(Object(Aws\ResultPaginator), Object(Closure)) #16 [internal function]: Aws\flatmap(Object(Aws\ResultPaginator), Object(Closure)) #17 /var/www/html/wp-content/plugins/s3-uploads/inc/class-stream-wrapper.php(695): Generator->valid() #18 [internal function]: S3_Uploads\Stream_Wrapper->dir_readdir() #19 /var/www/html/wp-content/plugins/contact-form-7/includes/file.php(362): readdir(Resource id #734) #20 /var/www/html/wp-includes/class-wp-hook.php(322): wpcf7_cleanup_upload_files() #21 /var/www/html/wp-includes/class-wp-hook.php(348): WP_Hook->apply_filters(NULL, Array) #22 /var/www/html/wp-includes/plugin.php(517): WP_Hook->do_action(Array) #23 /var/www/html/wp-includes/load.php(1280): do_action('shutdown') #24 [internal function]: shutdown_action_hook() #25 {main} thrown in /var/www/html/vendor/aws/aws-sdk-php/src/S3/PermanentRedirectMiddleware.php on line 49