<!-- mobian-agent-page publisher="dailydev" canonical="https://daily.dev/posts/customizing-angular-aria-tabs-quickly-with-google-antigravity-cli-lbxkbehja" -->

---
title: Customizing Angular Aria Tabs Quickly with Google...
description: An experiment tests how well Angular Aria&#x27;s accessible tab UI components can be customized while preserving accessibility, using Google Antigravity&#x27;s AI coding...
canonical: https://daily.dev/posts/customizing-angular-aria-tabs-quickly-with-google-antigravity-cli-lbxkbehja
twitter:card: summary_large_image
twitter:site: @dailydotdev
og:type: website
og:site_name: daily.dev
og:title: Customizing Angular Aria Tabs Quickly with Google Antigravity CLI | daily.dev
og:description: An experiment tests how well Angular Aria&#x27;s accessible tab UI components can be customized while preserving accessibility, using Google Antigravity&#x27;s AI coding...
og:url: https://daily.dev/posts/customizing-angular-aria-tabs-quickly-with-google-antigravity-cli-lbxkbehja
og:image: https://api.daily.dev/og/posts/lbXKbEhja.png
og:image:alt: Customizing Angular Aria Tabs Quickly with Google Antigravity CLI
og:image:width: 1200
og:image:height: 630
og:locale: en
---

> ## Documentation Index
> Fetch the complete documentation index at: https://daily.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Customizing Angular Aria Tabs Quickly with Google Antigravity CLI

**[Angular](https://daily.dev/sources/angular)** · 3 min read · 3 upvotes · 0 comments

## Summary

An experiment tests how well Angular Aria's accessible tab UI components can be customized while preserving accessibility, using Google Antigravity's AI coding agent to restyle a tabs example into a neumorphic design. The agent's first pass dropped the Lighthouse accessibility score from 100 to 95 due to poor color contrast, common in neumorphic designs. A follow-up prompt asking the agent to fix WCAG contrast issues restored the score to 100, demonstrating that Angular Aria patterns can maintain accessibility even under significant visual customization when paired with iterative AI-assisted fixes.

## Full article

daily.dev links to this article rather than hosting it. Read it at the original source: <https://blog.angular.dev/customizing-angular-aria-tabs-quickly-with-google-antigravity-cli-39ff8e0271a4>

## Questions this post answers

### How can I fix Lighthouse accessibility contrast issues after redesigning UI with an AI coding agent?

Prompt the AI coding agent directly to address WCAG contrast failures, describing the specific issue such as insufficient background and foreground contrast ratio. In one case, restyling Angular Aria tabs into a neumorphic design dropped the Lighthouse accessibility score from 100 to 95 due to contrast, and a follow-up prompt asking the agent to fix WCAG contrast restored the score to 100.

_Developers balancing custom UI design with accessibility standards can find more workflow examples on daily.dev._

### Can neumorphic design be made accessible in a web UI?

Yes, but it requires deliberate contrast fixes since neumorphic designs are typically criticized for poor accessibility due to low contrast between elements. When Angular Aria tabs were restyled into a neumorphic look, the initial result scored 95 on Lighthouse accessibility due to contrast failures, and targeted fixes brought it back to a 100 score.

_Anyone weighing visual trends against accessibility can track more accessibility-focused UI patterns on daily.dev._

## Similar posts on daily.dev

- [I used Google Antigravity instead of Figma for a week, and my UI prototypes are done in half the time](https://daily.dev/posts/i-used-google-antigravity-instead-of-figma-for-a-week-and-my-ui-prototypes-are-done-in-half-the-tim-kvn2dt15g) · XDA Developers · 0 upvotes · 0 comments
- [Google Antigravity](https://daily.dev/posts/google-antigravity-uxjeuoy6z) · Hacker News · 25 upvotes · 2 comments

---

Tags: [#ai-agents](https://daily.dev/tags/ai-agents), [#css](https://daily.dev/tags/css), [#angular](https://daily.dev/tags/angular), [#accessibility](https://daily.dev/tags/accessibility)

[View this post on daily.dev](https://daily.dev/posts/customizing-angular-aria-tabs-quickly-with-google-antigravity-cli-lbxkbehja)

```json
{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]}
{"@context":"https://schema.org","@type":"TechArticle","headline":"Customizing Angular Aria Tabs Quickly with Google Antigravity CLI","url":"https://daily.dev/posts/customizing-angular-aria-tabs-quickly-with-google-antigravity-cli-lbxkbehja","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/customizing-angular-aria-tabs-quickly-with-google-antigravity-cli-lbxkbehja"},"datePublished":"2026-09-02T02:04:22.416Z","dateModified":"2026-09-13T20:23:37.839Z","description":"An experiment tests how well Angular Aria's accessible tab UI components can be customized while preserving accessibility, using Google Antigravity's AI coding...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/8120953aea09f5eb3cbac0bf616df8ce?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/8120953aea09f5eb3cbac0bf616df8ce?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Angular","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Angular","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/angular","url":"https://daily.dev/sources/angular"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/customizing-angular-aria-tabs-quickly-with-google-antigravity-cli-lbxkbehja","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":3},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"ai-agents,css,angular,accessibility","timeRequired":"PT3M"}
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Angular","item":"https://daily.dev/sources/angular"},{"@type":"ListItem","position":3,"name":"Customizing Angular Aria Tabs Quickly with Google Antigravity CLI"}]}
{"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/customizing-angular-aria-tabs-quickly-with-google-antigravity-cli-lbxkbehja#faq","mainEntity":[{"@type":"Question","name":"How can I fix Lighthouse accessibility contrast issues after redesigning UI with an AI coding agent?","acceptedAnswer":{"@type":"Answer","text":"Prompt the AI coding agent directly to address WCAG contrast failures, describing the specific issue such as insufficient background and foreground contrast ratio. In one case, restyling Angular Aria tabs into a neumorphic design dropped the Lighthouse accessibility score from 100 to 95 due to contrast, and a follow-up prompt asking the agent to fix WCAG contrast restored the score to 100. Developers balancing custom UI design with accessibility standards can find more workflow examples on daily.dev."}},{"@type":"Question","name":"Can neumorphic design be made accessible in a web UI?","acceptedAnswer":{"@type":"Answer","text":"Yes, but it requires deliberate contrast fixes since neumorphic designs are typically criticized for poor accessibility due to low contrast between elements. When Angular Aria tabs were restyled into a neumorphic look, the initial result scored 95 on Lighthouse accessibility due to contrast failures, and targeted fixes brought it back to a 100 score. Anyone weighing visual trends against accessibility can track more accessibility-focused UI patterns on daily.dev."}}]}
```

