Google reCAPTCHA has become almost ubiquitous for protecting websites against spam and automated abuse. In its latest version, reCAPTCHA v3, Google displays only a small badge (badge) in the bottom right corner of the page. While this badge fulfills attribution requirements, it can clash with your site’s design or distract users. In this article, I’ll explain how to remove that badge from your site—particularly if you’re using WordPress—without violating Google’s terms of service.
For many years, Google offered reCAPTCHA v2 (second version), which prompted users to solve image‑based puzzles or click a checkbox to prove they were human. Although effective, it added friction to the user experience and sometimes required multiple challenges in a single session. To address this, Google introduced reCAPTCHA v3 (third version), which runs entirely in the background and assigns each request a risk score. The only visible element is a small badge linking to Google’s privacy policy and terms of service.
Before hiding the badge, it’s crucial to understand Google’s legal requirements. According to the reCAPTCHA FAQ, you may conceal the badge as long as you include a visible attribution elsewhere in the user flow—typically in your site’s footer. This ensures users are still informed that your site is protected by Google’s anti‑bot technology.
Google recommends adding the following notice to your footer:
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.Once you’ve added this attribution, hiding the badge is straightforward. Add this single line of CSS to your stylesheet:
.grecaptcha-badge { visibility: hidden; }If you prefer, you can insert it directly into your section:
On WordPress, the easiest way is to go to Appearance → Customize → Additional CSS and paste the snippet there. This approach keeps the badge in the document flow—allowing reCAPTCHA scripts to run correctly—while making it invisible to users.
Important: Do not use display: none; on the badge. Completely removing it from the DOM can prevent the reCAPTCHA script from loading or reporting risk scores properly, effectively disabling spam protection and exposing your forms to bots. Using visibility: hidden; ensures the badge remains present in the markup without being visible.
Benefits of Hiding the Badge
You might wonder why you would want to hide the badge at all. Here are the main advantages:
- Sleeker Visuals: The badge can overlap important UI elements or look out of place, especially on mobile screens.
- Improved UX: With reCAPTCHA v3 running invisibly, end users won’t encounter any extra clicks or puzzles.
- Consistent Branding: Removing third‑party UI elements helps maintain a clean, cohesive design.
Troubleshooting and Best Practices
- If the badge still appears, clear your browser cache and any CDN cache to ensure your new CSS is applied.
- Use your browser’s developer tools to inspect the
.grecaptcha-badgeelement and confirm that no other stylesheet is overriding your rule. - Double‑check that your footer attribution text is clearly visible and matches Google’s recommended wording.
- Monitor Google’s documentation periodically in case their policy changes regarding badge visibility.
Accessibility Considerations
Even though the badge is invisible, make sure your site remains accessible:
- Use semantic HTML for your footer attribution so screen readers can announce it properly.
- Ensure that hiding the badge does not interfere with focus order or navigation.
By following these simple steps, you can maintain a badge‑free integration of reCAPTCHA v3 while retaining its powerful, behind‑the‑scenes spam protection. This solution keeps your interface clean, enhances usability, and meets Google’s legal requirements. If you encounter any issues or have questions, feel free to leave a comment below. Happy coding!
Photo by Caio